Curved end of border-bottom in CSS

Suppose i want a border-bottom to look like this:

This is not possible within default borders, as border-radius controls the radius around the element, not a single border edge.

In-order to achieve this, a pseudo element can be used.

div {
  max-width:50vw;
  padding-bottom:25px;
  position:relative;
}
div:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:red;
  height:20px;
  border-radius:0 10px 10px 0;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quippe: habes enim a rhetoribus; Quodsi ipsam honestatem undique pertectam atque absolutam. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt.</div>

The output would look like:

Leave a comment

Your email address will not be published. Required fields are marked *