v147 · CSS

CSS border-shape

Define non-rectangular borders using the same shape functions as clip-path — except now the border, box-shadow, outline, and background all follow the new geometry.

concepts

  1. Tooltip Architect

    Build an arrow-pointer tooltip two ways: the old clip-path hack vs. border-shape. Toggle shadow, border, and focus outline to see exactly what breaks with the old approach.

  2. Shape Palette

    Eight shapes — hexagon, arrow tab, chevron, speech bubble, star, cross, diamond, triangle — each rendered as a bordered element with a flat drop shadow. The entire box model follows every curve.

  3. Badge Forge

    Interactive badge builder. Pick a shape preset, set background and border colours, drag the border-width slider, and get the generated CSS to copy. Real outlines and shadows included.

  4. Progress Steps

    A checkout-style step indicator where each step is a chevron shape via border-shape. The border, background, and focus outline all follow the chevron geometry. Step forward and back — compare with the old rectangular + arrow-separator approach.

  5. Compatibility Lab

    Probes border-shape with every shape function — polygon(), path(), shape(), inset(), ellipse() — via CSS.supports() and live DOM injection. Provides the @supports not guard with clip-path as fallback, explaining the key difference: border-shape makes the border and shadow follow the shape, clip-path does not.

why it shipped

Before border-shape, non-rectangular UI elements required clip-path — which only masks painted pixels. The border was drawn then clipped away, box-shadow was invisible (it's outside the clip), and the focus outline was still a rectangle. Developers fell back to filter: drop-shadow() and fake borders made of pseudo-elements. border-shape redefines the CSS box geometry itself, so every visual layer — background, border, shadow, outline — follows the shape without workarounds. It also composes with border-image for textured or gradient shaped borders.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗