← Demos

Pill gallery

Compare shadows with plain Tailwind →

Every pill below is squircle-pill h-12 w-40 bg-indigo-500 plus the classes in its label, unless its section says otherwise. Switch modes to compare how each is drawn; each loads the page afresh. The notes describe a shaped pill: with no shaping each is a plain stadium, so what the shape would erase still shows.

Drawn by …

Sides

A side caps that end alone and squares the other. -s and -e are the inline ends, so they swap right to left. There are no -x or -y: a cap can't be wider than the box, so squircle-pill always caps the short ends.

Sides on tall and square pills

The same utilities on a pill taller than it is wide, and on a square. A cap is clamped to what the box can give it, so a square capped at one end is an arch, not a circle.

Button groups

What sides are for: the first button capped at the start, the last at the end, the middle square. The same markup right to left caps the other way round.

Backgrounds

The pill hides the element's own background and paints a copy of it shaped to the pill, so any background works: colours, gradients, images, translucency.

Clip paths of its own

The pill shapes a copy of its background rather than the element itself, so the element's own clip-path applies on top of it, border and all, with the worklet and the polyfill alike.

Tailwind mask utilities

A mask on the element applies to the whole pill, as it would to any element: the shape is on the copy of its background, so the two never compete.

Borders

Drawn by the pill along its own outline, from Tailwind's border utilities, with tailwind-pill-border loaded.

Outlines

Drawn by the pill along its own outline, with tailwind-pill-border loaded: offset outwards, or inwards with a negative offset, solid, dashed or dotted.

Tailwind ring utilities

Drawn by the pill along its own outline too, with tailwind-pill-border loaded. A ring offset is a band of its own colour, as in Tailwind.

Focus

Tab through these. The pill picks up focus states like any other, outside the box included; with no utility at all the browser's own focus ring shows, around the stadium.

Shadows

Box shadows are cast by the pill's own outline, so they meet it with no gap. A drop shadow follows the pill-shaped background by itself; inner shadows are painted inside the pill. Shown on light tiles so the shadows stand out.

Without Tailwind

The plain-CSS stylesheet, squircle-pill.css, on data-squircle-pill elements, driven by the pill's own custom properties. Each label is the element's inline style.