CSS 3 special rounded border

Question

I have tried to create that rounded border corners on the bottom but I can't figure it out how to make them ....

.test {
  border-bottom: 2px solid #EEF7FF;
  display: inline-flex;
}

.test li {
  float: left;
  list-style-type: none;
}

.test li a {
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 5px;
  color: #A6B5C7;
}

<div class="" style="margin-top: 20px;">
  <ul class="test" style>
    <li>
      <a style="border-top: 2px solid #EEF7FF;border-left: 2px solid #EEF7FF;border-right: 2px solid #EEF7FF;border-bottom: 5px solid white;color: #000000 !important;padding-bottom: 5px;vertical-align: super;border-radius: 5px 5px 0px 0px; " href="">All</a>
    </li>
    <li>
      <a href="">Solved</a>
    </li>
  </ul>
</div>

did you try this ```.test li:first-child a { border-radius: 5px 5px 0px 0px; }``` — Giriteja Bille, Jan 10 '23 at 14:23
You might want to take a look at this article, which describes what you are apparently looking for: https://css-tricks.com/tabs-with-round-out-borders/ — Johannes, Jan 10 '23 at 15:12
And a second one on the same website (css tricks): https://css-tricks.com/better-tabs-with-round-out-borders/ — Johannes, Jan 10 '23 at 15:13

Diego D · Answer 1 · 2023-01-10T15:22:14.317

Connecting border-radius from adjacent elements

Those borders might be achieved connecting the borders of the adjacent list item elements.

After finishing the demo I realized it's not the best approach to get there actually. But since it shows how to deliver an idea I think it's still worth remaining here.

Styling the active item - border-left and border-top:

I added the class active to distinguish between active and inactive navigation links.

The item with the active has only the border left and top styled:

li.active a {    
  position: relative;
  color: black;  
  vertical-align: super;
  border-top: solid var(--border-size) var(--border-color);
  border-left: solid var(--border-size) var(--border-color);    
  border-radius: var(--border-radius-active) var(--border-radius-active) 0px 0px; 
}

Styling the active item - border-right:

While the right border gets styled using the pseudoelement ::after positioned absolute. The reason why we couldn't style directly the right border it's because its lenght can't be the whole height since we are trying to connect with this segment the border radius coming from two different elements and if we used the whole lenght it wouldn't look right:

li.active a::after {  
  content:"";
  background: var(--border-color);
  position: absolute;
  bottom: var(--border-offset-bottom);
  right: 0;
  height: calc(100% - var(--border-offset-top) - var(--border-offset-bottom));
  width: var(--border-size);  
}

Styling the next item - border-bottom:

And eventually the last portion of the line is styled by the next element:

li.active + li a {
  border-bottom: solid var(--border-color) var(--border-size);
  border-radius: 0 0 0 var(--border-radius-inactive);
}

Custom properties:

I encoded the core parameters as custom properties in the :root element:

--border-color: #EEF7FF;  
--border-size: 1px;
--border-offset-top: 4px;
--border-offset-bottom: 2px;
--border-radius-active: 10px;
--border-radius-inactive: 3px;

The demo:

In the demo you can toggle the border color to red to better see in contrast the result:

:root{
  --border-color: #EEF7FF;  
  --border-size: 1px;
  --border-offset-top: 4px;
  --border-offset-bottom: 2px;
  --border-radius-active: 10px;
  --border-radius-inactive: 3px;
}

.red{
  --border-color: red;  
}

*{
  box-sizing: border-box;
}

body{
  font-size: 30px;
  font-family: sans-serif;
}

.test {  
  display: inline-flex;
}

.test li {
  float: left;
  list-style-type: none;  
}

.test li a{
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #A6B5C7;
}

li.active a {    
  position: relative;
  color: black;  
  vertical-align: super;
  border-top: solid var(--border-size) var(--border-color);
  border-left: solid var(--border-size) var(--border-color);    
  border-radius: var(--border-radius-active) var(--border-radius-active) 0px 0px;
}

li.active a::after {  
  content:"";
  background: var(--border-color);
  position: absolute;
  bottom: var(--border-offset-bottom);
  right: 0;
  height: calc(100% - var(--border-offset-top) - var(--border-offset-bottom));
  width: var(--border-size);  
}

li.active + li a {
  border-bottom: solid var(--border-color) var(--border-size);
  border-radius: 0 0 0 var(--border-radius-inactive);
}

button{
  cursor: pointer;
  padding: 1em;
}

<div style="margin-top: 20px;">
  <ul id="nav" class="test" style>
    <li class="active">
      <a href="#">All</a>
    </li>
    <li>
      <a href="#">Solved</a>
    </li>
  </ul>
</div>

<button onclick="document.getElementById('nav').classList.toggle('red')">change color to red!</button>