CSS border-shape #1371

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 ([css-borders-4] border-shape property mozilla/standards-positions#1365)
• WebKit: no position yet ([css-borders-4] border-shape property WebKit/standards-positions#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/