Intent to prototype: CSS corner-shape

[Rémi Papillié]

Summary:

The corner-shape property is used to modify the shape of rounded corners created by the border-radius property and its associated longhands. Already-rounded corners can be further customized in terms of the degree of rounding applied to them, allowing the creation of, for example, beveled, notched, and squircle corners. Borders, outlines, shadows, and background effects applied to the container will follow the defined corner shape.

We intend to enable this feature in Firefox Nightly only, starting with version 158.

Thanks to Mauro V. for contributing the initial patches for this feature.

Bug:
[css-borders-4] Add CSS corner-shape support

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

Platform Coverage:
All

Standards Body:
CSSWG / W3C

Preference:
layout.css.corner-shape.enabled - Bug 2070927 to enable in Nightly

DevTools Bug:
N/A

Extensions Bug:
N/A

Use Counter:
css_corner_*_shape

Standards-Positions Discussion:
https://github.com/mozilla/standards-positions/issues/823

Other Browsers:
- Blink: Shipped since Chrome 139

- WebKit: Experimental support since Safari Technology Preview 251

web-platform-tests:

https://wpt.fyi/results/css/css-borders/corner-shape