Intent to Prototype: CSS background-clip: border-area

[Chromestatus]

Contact emails

cg...@chromium.org

Specification

https://drafts.csswg.org/css-backgrounds-4/#typedef-bg-clip

Summary

Implements the border-area value for the CSS background-clip property, as defined in CSS Backgrounds Level 4. background-clip: border-area clips an element's background to the area painted by its border strokes, taking border-width and border-style into account while ignoring transparency from border-color. This enables gradient borders without border-image. WebKit already ships this feature; this implementation brings Chromium to parity.

Blink component

Blink>CSS

Web Feature ID

background-clip-border-area

Motivation

There is currently no ergonomic way to clip a background to the visible border geometry in CSS. Authors who want gradient or image borders must use border-image, which is complex, overrides other border styling, and does not compose well with other properties. The border-area clip value provides a clean, declarative solution to this problem. WebKit already ships this feature, and it is part of the actively developed CSS Backgrounds Level 4 specification.

Initial public proposal

No information provided

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/329302543

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6234471210811392?gate=6328288463159296

This intent message was generated by Chrome Platform Status.