v147 · CSS

Corner-by-Corner

Each corner has its own longhand: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape. Mix bevel, notch, squircle, and scoop on a single element.

Feature detection: checking…
Corner shapes
25%
Presets

Generated CSS

contract checks

accept longhands checking…
accept four-value shorthand checking…
reject unknown longhand value checking…
reject malformed superellipse() checking…

Use the invalid button to try corner-top-left-shape: definitely-not-a-shape on the live preview.

see also

implementation reference

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