Contact emails
cg...@chromium.org
Specification
https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon
Summary
Allows an optional corner-rounding parameter in the polygon() CSS shape function. Developers can specify a length value to round polygon corners without manually computing bezier curves.
Interactive demo:
https://codepen.io/yisi/pen/NPRLEQN
CSSWG issue:
https://github.com/w3c/csswg-drafts/issues/9843
Blink component
Blink>CSS
Web Feature ID
shape-function
Motivation
Rounded polygons are a common design pattern on the web. Without this feature, developers who want rounded corners on a polygon shape must manually compute bezier control points or use workarounds such as SVG clip paths. The polygon() round parameter makes this directly expressible in CSS, reducing complexity and improving maintainability.
Initial public proposal
No information provided
TAG review
No information provided
TAG review status
Not applicable
Goals for experimentation
None
Risks
Debuggability
No information provided
Will this feature be supported on all six Blink platforms
(Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes
Yes
Flag name on about://flags
No information provided
Finch feature name
CSSPolygonRounding
Rollout plan
Will ship enabled for all users
Requires code in //chrome?
False
Tracking bug
https://issues.chromium.org/issues/329302249
Estimated milestones
| Shipping on desktop | 150 |
| Shipping on Android | 150 |
| Shipping on WebView | 150 |
Anticipated spec changes
Open questions about a feature may be a source of future web compat or
interop issues. Please list open issues (e.g. links to known github
issues in the project for the feature specification) whose resolution
may introduce web compat/interop risk (e.g., changing to naming or
structure of the API in a non-backward-compatible way).
No information provided
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/6636392944893952?gate=6487513336250368