Skip to content

01UI · Shape

v1.0.0

CSS Tab Shape

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

CustomizeHow to use ↓
Section
UI
Kind
Shape
Published

Published Jul 20, 2026.

02How to use

Three ways
  1. 01Customize it

    Tune every value in the app until it looks right.

    Open the app ↗

  2. 02Copy the embed

    Settings are data-* attributes on the element, in kebab-case.

    <div data-css-tab-shape style="height:480px"></div>
<script src="https://vanilla-motion.com/embed/css-tab-shape/1.0.0/css-tab-shape.js"></script>
  3. 03Paste it on your site

    Anywhere that takes HTML: an Embed element in Webflow or Framer, a Custom HTML block in WordPress, or straight into your page.

03Case study

2 min read

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

Tab UI with CSS mask

MobileDesktop
Open Demo
  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;
}
  1. 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;
}
  1. 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 Demo
.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 Demo
.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
  );
}

04More effects

UI