Intent to Ship: CSS border-shape

[Chromestatus]

Contact emails

nrose...@chromium.org, sakh...@chromium.org

Explainer

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

Specification

https://drafts.csswg.org/css-borders-4/#border-shape

Summary

CSS border-shape enables creating non-rectangular borders, with any arbitrary shape (polygon, circle, shape(), etc). Though border-shape accepts the same shapes as clip-path, it is fundamentally different: border-shape defines the shape of the border, decorates it, and clips only the inside. border-shape has two variants: one variant that strokes a shape, and another variant that fills between two shapes.

Blink component

Blink>CSS

Web Feature ID

No information provided

Motivation

Together with shape() and corner-shape, border-shape allows authoring non-box designs in the web, enabling a more expressive and beautiful web. It addresses an old limitation where clipping is free-form but borders are rectangular.

Initial public proposal

https://drafts.csswg.org/css-borders-4/#border-shape

TAG review

No information provided

TAG review status

Pending

Risks

Interoperability and Compatibility

No information provided

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1365)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/625)

Web developers: Positive (https://bsky.app/profile/una.im/post/3me56xpfksk2i)

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?

No information provided

Debuggability

No information provided

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

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

Yes
https://wpt.fyi/results/css/css-borders/tentative/border-shape

Flag name on about://flags

CSSBorderShape

Finch feature name

CSSBorderShape

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/370041145

Estimated milestones

Shipping on desktop	147
Shipping on Android	147
Shipping on WebView	147

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/5459864205393920?gate=6268824718147584

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68514a79.170a0220.61ffc.082a.GAE%40google.com

This intent message was generated by Chrome Platform Status.