hpique hpique - 3 months ago 46
CSS Question

Round cap underline in CSS

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

Answer

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

HTML:

<div id="test">Hello world</div>

CSS:

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 55px 0 0 #000;
  font-family: sans-serif;
}

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...