v147 · CSS

Compatibility Lab

Probes border-shape with every shape function via CSS.supports(), runs live DOM injection to confirm rendering, and shows the clip-path fallback pattern for browsers that don't support border-shape yet.

Interactive compatibility check

Change the declaration, force the fallback branch, and run the malformed-value check. The readouts use the real CSS parser and CSSOM, not a hard-coded support table.

border-shape value

border width 6px

Force the clip-path fallback even when border-shape parses. Also set border-radius to show the spec's ignored-radius branch.

border-shape

Parser

CSSOM

Layout box

Radius branch

Malformed value check has not run yet.

CSS.supports() probes

Live rendering test

Each shape is applied via DOM injection. A green badge means the browser applied the value; amber means it fell back to rectangular.

Fallback pattern

/* border-shape not supported — fallback via clip-path */ @supports not (border-shape: shape(from 0% 0%, line to 100% 0%, close)) { .shaped-el { /* clip-path shapes visually but outline/border still follow box model */ clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%); /* Note: border, box-shadow, outline do NOT follow clip-path shape */ } } /* With border-shape — border, shadow, and outline follow the shape */ @supports (border-shape: shape(from 0% 0%, line to 100% 0%, close)) { .shaped-el { border-shape: shape(from 0% 0%, line to 80% 0%, line to 100% 50%, line to 80% 100%, line to 0% 100%, close); border: 2px solid var(--border-black); /* follows the shape */ box-shadow: 4px 4px 0 var(--border-black); /* follows the shape */ } } /* JavaScript feature detection */ const SUPPORTS_BORDER_SHAPE = CSS.supports('border-shape', 'shape(from 0% 0%, line to 100% 0%, close)');

References

implementation reference

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