hpique hpique - 10 months ago 105
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

produces this stylish effect instead:

enter image description here


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


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


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