How do I create a rounded line border in a border-bottom property?

Question

I'm trying to create an stylized underline and the results I pretend its something like this:

The goal I want to achieve:

As you can see, the border I want is rounded in its extremities. But using the border-bottom here what I get so far:

My code its like this:

HTML

<nav class="navbar">
    <a id="index" href="#index">Home</a>
    <a href="#">Pokedéx</a>
    <a href="#">Legendaries</a>
    <a href="#">Documentation</a>
</nav>

and CSS

.navbar > a {
    font-size: 1.5rem;
    margin: 0px 10px 0px 0px;
    text-decoration: none;
    color: #212121;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
}

.navbar > a:target {
    border-bottom: 4px solid #212121;
}

So what I want to know is if there's a way to make the borders of a border-box (whether they are bottom, top, right, left, doesn't matter) rounded or there's a better approach to style this underline? How would you do it?

Thank you very much.

You can't do that with `border`. Use a pseudo-element instead. [Edit line thickness of CSS 'underline' attribute](https://stackoverflow.com/a/34886536) — Paulie_D, Mar 20 '21 at 22:05
is it https://stackoverflow.com/questions/17030664/round-cap-underline-in-css what you are looking for? — , Mar 20 '21 at 22:07
Yes @BrownPaul, I think haven't found cause in fact I didn't know exactly how to quest. Thank you so much for the link, I've found the answer I as looking for there... — Fabiano Vasconcelos Sant'Anna, Mar 20 '21 at 22:22

score 4 · Accepted Answer · answered Mar 20 '21 at 22:16

I normally use the ::after pseudo-element for this

.navbar > a {
  position: relative; /* This is the reference for the after psuedo-element*/
  font-size: 1.5rem;
  margin: 0px 10px 0px 0px;
  text-decoration: none;
  color: #212121;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
}

.navbar > a:target::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px; /* Negative height */
  width: 100%;
  height: 4px; /* Height of border */
  background-color: #212121;
  border-radius: 5rem; /* This can be any number but is normally set very high for the pill-shape */
}

<nav class="navbar">
  <a id="index" href="#index">Home</a>
  <a href="#">Pokedéx</a>
  <a href="#">Legendaries</a>
  <a href="#">Documentation</a>
</nav>

How do I create a rounded line border in a border-bottom property?

1 Answers1