CSS `corner-shape`

[jsnkuhn]

Description

corner-shape builds on border-radius to allow more corner shaping options than just round. Options include round, squircle, square, bevel, scoop and notch. A superellipse function is also available to feather differences between the existing keywords. For example superellipse(-2) allows devs to create an inset squircle shape that does not currently have a keyword.

use case thread: w3c/csswg-drafts#6980
codepen collection (Chrome only for now): https://codepen.io/collection/yyNdaM

Specification

https://drafts.csswg.org/css-borders-4/#corner-shaping

web-feature

There is no web feature listing for corner-shape

Test Links

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

Additional Signals

Chrome and edge have a test implementation in as of stable Chromium 139.

Firefox

position (no response yet):
mozilla/standards-positions#823

bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1726232

Webkit

position (support):
WebKit/standards-positions#229

bugzilla:
https://bugs.webkit.org/show_bug.cgi?id=277912

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

No web features (from the web-features project) were found in your proposal. If your proposal doesn't correspond to a web feature, that is fine.
Otherwise, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.