CSS Tab Shape

Create tab shapes using CSS mask and clip-path: shape() techniques.

Tab UI with CSS mask

MobileDesktop

Open DemoRefresh

1. Apply normal paddings
2. Create a border around the tab, as we will mask out everything from this border outward.

.tab {
  @apply bg-blue-400 px-3 py-1;

  --r: 12px;
  @apply rounded-t-(--r);

  border: var(--r) solid red;
  border-bottom: 0;
}

3. Use mask with 3 layers to cut out the red border

.tab {
  /*...*/
  
  mask: linear-gradient(#000) padding-box,
  radial-gradient(100% 100% at 0 0, #0000 98%, #000) 0 100% / var(--r) var(--r),
  radial-gradient(100% 100% at 100% 0, #0000 98%, #000) 100% 100% / var(--r) var(--r);
  mask-repeat: no-repeat;
}

4. Finish with hover status

Clip path shape()

This approach using clip-path: shape(), a modern function of clip path. This solve the box model issue of using mask.

MobileDesktop

Open DemoRefresh

.tab {
  @apply bg-transparent px-8 py-2 text-center;
  transition: background-color .3s ease;

  --r: 12px;

  clip-path: shape(
    from 0 100%, /*1. start from bottom left corner*/
    arc by var(--r) calc(-1 * var(--r)) of var(--r), /*2. create an arc then draw a vertical line up*/
    vline to var(--r),
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw, /*3. top left rounded corner*/
    hline to calc(100% - 2 * var(--r)), /*4. draw a horizontal line to the next corner*/
    arc by var(--r) var(--r) of var(--r) cw, /*5. top right rounded corner*/
    vline to calc(100% - var(--r)), /*6. vertical line down*/
    arc by var(--r) var(--r) of var(--r), /*7. bottom right inward radius and close*/
    close
  );
}

Tabs with folder shape

MobileDesktop

Open DemoRefresh

.tab {
  @apply pl-6 pr-10 py-2 text-center;
  --r: 8px;

  clip-path: shape(
    from 0 100%,
    vline to var(--r),
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw, /*top left rounded corner*/ 
    hline to calc(100% - 4 * var(--r)),
    curve to calc(100% - 22px) 5px with calc(100% - 24px) 0px, /*top right rounded corner*/
    line to calc(100% - 8px) calc(100% - 4px),
    curve to 100% 100% with calc(100% - 6px) 100%, /*!*bottom right rounded corner*/
    line to 100% 100%,
    close
  );
}