Round cap underline in CSS

Question

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:

Answer 1

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: