CSS 3 special rounded border [duplicate] - html

Question

This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed last month.
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>
Solved
</li>
</ul>
</div>

Answer 1

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">
All
</li>
<li>
Solved
</li>
</ul>
</div>
<button onclick="document.getElementById('nav').classList.toggle('red')">change color to red!</button>