We all love the squircle! It's great, we can use it to make corners feel extra smooth. Gives that little bit of zhuzh. Others can tell you all about the math and why we love it. And now we can use them in CSS! There's just one problem... for the same border-radius, the squircle will look less rounded than the circle. That's where this package comes in.
Explore Tailwind utilities for squircles and pills with visual examples.
Compare regular rounded-* corners
with squircle squircle-* corners at several radii.
Controls the superellipse exponent. Higher = more square. Default is 2.
Pill-shaped rectangles whose semicircular caps ease into the straight edges with no
jump in curvature, or in how fast it changes (G3), drawn by a Houdini paint worklet. Browsers without the
Paint API show the plain rounded-full stadium instead.
squircle-pill derives the caps from the element's own size, so there is nothing to configure per size. Next to it, the plain rounded-full stadium the pill falls back to where paint worklets are unsupported.
squircle-pill-arc-setback-* selects how many degrees of the circular cap the transition replaces. squircle-pill-edge-setback-*selects how far past the arc's top it finishes, in multiples of half the pill's height. G3 is the default; squircle-pill-g2 remains available.
With tailwind-pill-border loaded, Tailwind's own border-* utilities drive a ring the worklet draws along the real outline. Inset shadows and outlines need nothing special.
Pill button
Pill badge
NewPill with icon placeholder
Powered by StackBlitz. Requires a Chromium-based browser.