Border radius doesn't work in first-child pseudo class

Question

I have paragraphs inside a div, and I want to add border-bottom-left-radius to the first p element inside the div, but it doesn't work:

p {
  display: inline-block;
  border: 1px solid #000;
}
div:first-child {
  border-bottom-left-radius: 5px;
}

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

The same happens with :last-child, border-top-left-radius, border-top-right-radius, border-bottom-right-radius.

What is the problem? This and this similar questions were fixed with the background, but I have none. Attempting to read the specifications I found nothing related to the paragraph element or pseudo-class selectors.

Typo: You will just need to a space after div before the colon — imvain2, Jun 21 '23 at 21:37

score 1 · Accepted Answer · answered Jun 21 '23 at 21:36

From documentation:

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

you need to apply it to the p element, not div element.

p {
  display: inline-block;
  border: 1px solid #000;
}
div p:first-child {
  border-bottom-left-radius: 5px;
}

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

Border radius doesn't work in first-child pseudo class

1 Answers1