Curved End Of Border-bottom In Css

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

Solution 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:010px10px0;
}

<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>

Solution 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><divclass="title">
   lorem ipsum
   <divclass="underline"></div></div>

Solution 3:

Add this to your CSS:

border-top-right-radius: 10px;

underneath your other CSS. It should end up liek this:

.title {
    border-bottom: 10px solid red;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

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.
<divclass="title"></div>

Solution 4:

border-bottom-right-radius: 10px;
border-top-right-radius: 10px;