Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border.
However, I'm facing an issue where the border curves along with the border radius instead of remaining horizontal, as illustrated in the desired outcome image:
Desired Outcome
https://i.sstatic.net/HTkdZ.png
What I've Attempted
I have tried various approaches to tackle this problem. One attempt involves styling the selected tab with a bottom border, but it extends beyond the border-radius rather than being cut off as intended. Additionally, I experimented with using CSS's :after pseudo-element to truncate the border, but the result did not seamlessly merge into the radius as desired.
Another strategy I explored was tying the border radius to the tab icon, as shown below:
body {
background-color: #121212;
}
.wrapper {
padding: 15px;
}
.tabs {
background-color: #211F22;
display: flex;
height: 60px;
}
.tab {
align-items: center;
color: white;
display: flex;
flex: 1;
justify-content: center;
}
.first {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.last {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.selected {
border-bottom: 2px solid #7D53DA;
}<div class="wrapper">
<div class="tabs">
<div class="tab first selected">
Tab 1
</div>
<div class="tab last">
Tab 2
</div>
</div>
</div>Nevertheless, the challenge with this approach is that the border follows the curve of the radius, which is not ideal. Do you have any suggestions on how to achieve this design using CSS?