CSS ` border-shape`

Description

CSS border-shape (CSS Borders and Box Decorations Module Level 4) lets authors define an element’s border geometry using values (circle(), ellipse(), polygon(), inset(), shape(), path(), rect()) instead of a rectangle.

It has two modes: a single shape “stroke” mode, where the border is drawn along the path, and a two shape “fill” mode, where the border fills the area between an outer and inner shape.

Unlike clip-path, which only masks the rendered box, border-shape redefines the actual border geometry, so background, border image, outline and box shadow all correctly follow the new shape. It removes the need for clip-path plus pseudo element hacks for things like speech bubbles, scalloped cards, cut corner tooltips and hexagonal avatars.

Specification

https://drafts.csswg.org/css-borders-4/#border-shape

web-feature

border-shape

Test Links

Rendering tests are non-tentative:

• https://github.com/web-platform-tests/wpt/tree/master/css/css-borders/border-shape

Parsing tests still sit under tentative/ (worth flagging, since rendering has already graduated out of tentative status, you’d expect parsing to follow before or during the Interop review):

• https://github.com/web-platform-tests/wpt/blob/master/css/css-borders/tentative/parsing/border-shape-valid.html
• https://github.com/web-platform-tests/wpt/blob/master/css/css-borders/tentative/parsing/border-shape-invalid.html
• https://github.com/web-platform-tests/wpt/blob/master/css/css-borders/tentative/parsing/border-shape-computed.html

Live results: https://wpt.fyi/results/css/css-borders/border-shape?label=master&label=experimental&aligned&q=border-shape

Additional Signals

Standard Positions

• Chromium: shipped in Chrome/Edge 147 (April 2026)
• Firefox: no position yet (https://github.com/mozilla/standards-positions/issues/1365)
• WebKit: no position yet (https://github.com/WebKit/standards-positions/issues/625)

Signals

• Shapes and graphics is called out as a persistent pain point category, with respondents flagging that drawing complex shapes "remains tough with CSS only" - https://2026.stateofcss.com/en-US/pain-points/
• Una Kravets blog post (also see comments for extra signals) - https://una.im/border-shape
• CSS-Tricks post (also see comments for extra signals) - https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/

Start with the CSS Borders and Box Decorations Level 4 specification and the non-tentative tests in css/css-borders/border-shape. Compare the rendering and tentative parsing tests with the live WPT results, then review the linked browser-position signals. Done requires a clearly scoped interop assessment, but this issue does not define an implementation change.