Round lid underlines in CSS

Question

Can you make circular constraints (as shown in the image above) using CSS? How?

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

Answer 1

EDIT: I misunderstood that 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> 

Essentially, I put the text in a div and the shadow of the block will be the same size as the given height and width for that div, just play with height / width and you get what you want ...

Jsbin demo

Screenshot from demo:

Answer 2

Not. If you want to do this exclusively with HTML + CSS, you will need an additional element to sit under the text, and then apply the curvature and background color to it. As an alternative, and I think you can use an image.

Answer 3

Yes it is possible. Add a block element with :after without content and specify the desired width / height:

 h1:after { content:""; float:left; background:green; width:100%; height:6px; border-radius: 3px; } 

Spell here: https://jsfiddle.net/toqL0agq/1/

Answer 4

Like youtag's answer, my solution uses pseudo-elements, but my underscore only handles the length of the text and can be wrapped over several lines (with underscores running under each line of text).

Basically, I manually close the ends of an element’s border with circles of pseudo-elements before and after the element:

 h1 a { text-decoration: none; position: relative; border-bottom: 15px solid; padding-bottom:3px; } h1 a:hover, h1 a:focus { border-bottom: 15px solid #eb6d32; } h1 a:before, h1 a:after { content: ''; height: 15px; width: 15px; background-color: currentColor; border-radius: 15px; position: relative; display: inline-block; vertical-align: text-bottom; margin-bottom: -18px; } h1 a:before { left: .2ex; margin-left: -.4ex; } h1 a:after { margin-right: -.4ex; right: .2ex; } 

I use left and right for pseudo-elements, so the ends don't go too far beyond the text.

See my codepen .

Answer 5

you can do this by using the div below the text and setting your border radius to 2000 pixels. i think it will be easier

HTML:

 <div class="wrapper"> <span>Hell World</span> <div class="underline"></div> </div> 

CSS

 .underline{ height:0px;border: 3px solid black; border-radius: 2000px; } .wrapper{ display:inline-block; } 

JQUERY SNIPPET:

 var arbitrarynumber = 5 $('.underline').width($('.underline').parent().width()-arbitrarynumber) 

Answer 6

I tried to do the same with the accepted answer, but found that I was still getting the undesirable result shown in the question. You can achieve this with the pseudo class:

HTML:

 <span class="kicker">Hello World</span> 

CSS:

 .blog__kicker { font-size: 1rem; position: relative; &:after { content: ''; display: block; width: 100%; height: 6px; border-radius: 6px; background: #000; position: absolute; bottom: 0; left: 0; } 

}