is there a way to round border bottom?

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top