Round cap underline in CSS

Question

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

DarkAjax · Accepted Answer · 2019-04-06T01:52:49.370

19

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

edited Apr 06 '19 at 01:52

answered Jun 10 '13 at 19:23

DarkAjax

15,955
11
53
65

The second example is what I don't want. :) – hpique Jun 11 '13 at 12:40
1

There's always a way with CSS. :) – hpique Jun 27 '13 at 11:22
2

I know this is old but I figured in passing I would add the solution to this thread that you were asking for. Yes it is possible and it is easy. [I just edited the above JSBin.](http://jsbin.com/sugewuwiqu/1/) – AndyBean Nov 06 '14 at 00:04

score 9 · Answer 2 · answered Aug 18 '16 at 15:25

Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:

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

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

jennsuzhoy · Answer 3 · 2021-05-26T12:23:54.470

5

I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:

HTML:

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

CSS:

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

}

edited May 26 '21 at 12:23

answered Jul 25 '19 at 14:23

jennsuzhoy

61
1
3

Unlike all the other answers, this one works on any tag. SPECIALLY inline-tags. Options where only works in a div are not really a solution. THANK YOU @jennsuzhoy – Omar May 25 '21 at 10:13

score 2 · Answer 4 · answered Oct 12 '20 at 23:16

One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :

h1:after{
  content: " ";
  display: block;
  width: 1.5em;
  height: .2em;
  background-color: #f0860c;
  border-radius: 10px;
}

<!DOCTYPE html>

<html>
  <head>
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

score 1 · Answer 5 · answered Jun 10 '13 at 18:48

1

No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.

answered Jun 10 '13 at 18:48

Grant Thomas

44,454
10
85
129

score 0 · Answer 6 · answered Aug 30 '16 at 22:27

Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).

Basically, I manually cap the ends of the element's border with pseudo-element circles 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 on the pseudo-elements so the ends don't stick out too far past the text.

See my codepen.

score 0 · Answer 7 · answered Jul 06 '17 at 14:09

you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler

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)

Round cap underline in CSS

7 Answers7

Linked