Intent to Prototype: Smooth corners (corner-shape, superellipse, squircle)

[Chromestatus]

Contact emails

nrose...@chromium.org

Explainer

https://github.com/noamr/explainers/blob/main/corner-shape-explainer.md

Specification

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

Summary

Enable fine-tuning corners, on top of the existing border-radius, by specifying the shape/curvature of the corner. This allows shapes like squircles, notches, scoops etc., and animating between them.

Blink component

Blink>CSS

Motivation

Corners that are not exactly straight and not entirely round are very common in designs, e.g. on mobile platforms. However, on the web they are difficult to achieve, and Today it's very verbose and cumbersome to

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/10993

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: No signal

Web developers: Strongly positive (https://www.figma.com/blog/desperately-seeking-squircles)

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Is this feature fully tested by web-platform-tests?

Yes

Flag name on about://flags

CSSCornerShape

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/393145930

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5357329815699456?gate=6250071248863232

This intent message was generated by Chrome Platform Status.