CODEWITHSUNDEEP
htmlcss
Virge Assault
Virge Assault

Reputation: 1396

Curved end of border-bottom in CSS

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

enter image description here

With one curved end. Currently it looks like this:

enter image description here

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?

Upvotes: 23

Views: 29813

Answers (4)

CJ Nimes
CJ Nimes

Reputation: 658

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>

enter image description here

Upvotes: 4

GrumpyCrouton
GrumpyCrouton

Reputation: 8621

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

Upvotes: -5

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

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>

Upvotes: 33

Andy
Andy

Reputation: 99

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

Upvotes: -5

Related Questions