Rounded tabs with inner curves
Use modern CSS to create those famous rounded tabs with inner curves.
- No extra element & No pseudo-element
- Less than 10 CSS declarations to get the three variations
- One variable to control the curvature
- Works with gradient coloration
.rounded-tab {
--r: .8em; /* control the curvature */
border: solid #0000;
border-width: 0 var(--r);
border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
mask:
radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
calc(-1*var(--r)) 100%/100% var(--r) repeat-x,
conic-gradient(#000 0 0) padding-box;
}
.rounded-tab.left {
border-left-width: 0;
border-top-left-radius: var(--r);
}
.rounded-tab.right {
border-right-width: 0;
border-top-right-radius: var(--r);
}See the Pen Rounded tab using CSS mask by Temani Afif (@t_afif) on CodePen.