CSS Tip

Vertical rounded tabs using CSS mask

Updating the previous rounded tab shape to create the vertical version using the same code structure.

CSS-only vertical rounded tabs using CSS mask

.rounded-tab {
  --r: .8em; /* control the radius/curvature */

  border-block: var(--r) solid #0000;
  border-radius: var(--r) 0 0 var(--r)/calc(2*var(--r));
  mask: 
    radial-gradient(var(--r) at 0 var(--r),#0000 98%,#000 101%)
      100% calc(-1*var(--r))/var(--r) 100% repeat-y,
    conic-gradient(#000 0 0) padding-box;
}
.rounded-tab.alt {
  border-radius: 0 var(--r) var(--r) 0/calc(2*var(--r));
  mask: 
    radial-gradient(var(--r) at 100% var(--r),#0000 98%,#000 101%)
      0 calc(-1*var(--r))/var(--r) 100% repeat-y,
    conic-gradient(#000 0 0) padding-box;
}

See the Pen Vertical rounded tabs using CSS mask by Temani Afif (@t_afif) on CodePen.

More CSS Shapes: css-shape.com

More CSS Tips