Intent to Prototype: CSS border-shape

[Chromestatus]

Contact emails

nrose...@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

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

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: No signal

Web developers: No signals

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

CSSBorderShape

Finch feature name

CSSBorderShape

Requires code in //chrome?

False

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5459864205393920?gate=5070207189778432

This intent message was generated by Chrome Platform Status.