I’ve been playing around with a little CSS code for curved tabs recently, inspired by this style by MrOtherGuy.

It seems to work reasonbly well so far - still a work in progress - but one issue I just can’t figure out - when the tabs are overflowing, the additional bottom corners I created for the outer tabs are cut off, unless they are the very first or last tab (which are taken care of).

I’ve tried every selector and element in this area, to change the cutoff/clipping points of these outer visible tabs in overflow, or the width/padding etc. of the scrollbox “window”, but to no avail.

Any ideas would be much appreciated.

The code can be found here, a screenshot is attached showing the issue.

I hope the .svg code in the CSS file works, if not this is it:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 32 32">

  <path d="M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z" fill="context-fill"/>

  <path d="M3 32.5 A16 16 0 0 0 15.5 16" fill="rgba(155,122,0,0)" stroke="context-stroke" stroke-width="1px"/>

  <path d="M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z" fill="rgba(155,122,0,0)"/>

  <path d="M15.5 16 A18.5 18 0 0 1 35.5 -0.5" fill="transparent" stroke="context-stroke" stroke-width="1" />
</svg>