v147 · css · covered on mdn
Corner shaping (corner-shape, superellipse, squircle)
CSS properties that control the curvature of rounded corners beyond simple ellipses. Unlocks squircle, bevel, notch, and scoop shapes via corner-shape and its per-corner longhands, working within the region already defined by border-radius.
this feature is documented on MDN
MDN: corner-shape
MDN has a full reference page for the corner-shape shorthand and its longhands including syntax, allowed values (round, squircle, bevel, notch, scoop, superellipse()), live demos, and browser compatibility. gendn doesn't duplicate that here.
quick reference
| Shorthand | corner-shape — sets all four corners at once |
|---|---|
| Longhands | corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape |
| Values | round (default) · squircle · bevel · notch · scoop · superellipse(<number>) |
| Requires | border-radius must be non-zero — corner-shape operates within the corner region it defines |
| Squircle example | border-radius: 20px; corner-shape: squircle; |
| Shipped in | Chrome 147 (desktop + Android) |
| ChromeStatus | 5357329815699456 — Corner shaping (corner-shape, superellipse, squircle) |
| Spec | CSS Borders and Box Decorations Level 4 — Corner Shaping |