CSS `corner-shape`

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: https://github.com/w3c/csswg-drafts/issues/6980
codepen collection (Chrome only for now): https://codepen.io/collection/yyNdaM

Specification

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

web-feature

corner-shape

Test Links

https://wpt.fyi/results/?label=experimental&label=master&aligned&q=feature%3Acorner-shape

Additional Signals

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

Firefox

position (positive):
https://github.com/mozilla/standards-positions/issues/823

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

Intent to prototype: CSS corner-shape
https://groups.google.com/a/mozilla.org/g/dev-platform/c/IQX3aJ5tujE/m/3yiR5SAvAgAJ

Webkit

position (support):
https://github.com/WebKit/standards-positions/issues/229

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

In Safari Technology preview 251:
https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-251#New-Features

Start with the CSS Borders 4 corner-shaping specification and the linked WPT results for the experimental corner-shape feature. Review the use-case and browser-status links to determine the required test scope; the issue does not name a repository file or specific failing test, so the completion criteria need clarification.