CODEWITHSUNDEEP
htmlcss
Berg_Durden
Berg_Durden

Reputation: 1781

Is there a way to round the extremities of border-bottom?

I'd like to know if there is a way to make a border-bottom rounded.

Like this:

enter image description here

I understand that I could create an element, add a height, width, bg color and round it with border-radius, Actually, that is what I am doing in this image, this is a span. But I'd like to know if it is possible to make this with border-bottom.

I looked a lot, but I couldn't find an answer. In fact, I am almost sure that there is no way to do that, but if there is it would be great.

Upvotes: 0

Views: 351

Answers (1)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Yes, it is possible with the use of pseudo-element.

result

h1 {
  text-align: center;
}

h1>span {
  position: relative;
  border-bottom: 1px solid black;
}

h1>span::before {
  position: absolute;
  content: "";
  width: 60%;
  height: 3px;
  border-radius: 15px;
  background-color: greenyellow;
  bottom: -2px;
  left: 50%;
  transform: translate(-50%);
}
<h1> <span>Hello World</span> </h1>

Learn more about Pseudo-elements

Upvotes: 1

Related Questions