Css – Round cap underline in CSS

border, css, underline

enter image description here

Can you make round cap underlines (as in the above image) with CSS? How?

Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:

enter image description here

Best Solution

EDIT: I missunderstood what hpique wated, but this should work:

#test {  font-size: 50px;  background: transparent;  border-radius: 10px;  height: 10px;  width: 255px;  box-shadow: 0 55px 0 0 #000;  font-family: sans-serif;}
<div id="test">Hello world</div>

Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...

JSBin Demo

Screenshot from the Demo:

This should be what was expected...