Curved end of border-bottom in CSS

Question

I'm trying to make my border bottom look like this:

With one curved end. Currently it looks like this:

The CSS I'm trying to use is border-bottom-right-radius: 10px;. The code looks like this:

<div class="title">
    lorem ipsum
</div>

.title {
    border-bottom: 10px solid $mainRed;
    border-bottom-right-radius: 10px;
}

I also tried border-radius: 10px; which gives me the same result except both ends are curved. Increasing this number just makes the line slope upwards. How can I make the line look correct?

Answer 1

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

I would recommend faking it with a pseudo-element:

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>

Answer 2

I dont know if this is the best solution, but there it go:

<style>
.title .underline {
    border-top: 10px solid red;
    border-top-right-radius: 10px;
    border-bottom: 10px solid red;
    border-bottom-right-radius: 10px;
}
</style>

<div class="title">
   lorem ipsum
   <div class="underline"></div>
</div>