1880365 - [css-backgrounds] background-clip: border-area

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Mozilla Apprentice]

A resolution was made for csswg-drafts/#9456.

[css-backgrounds] background-clip: border-area

• RESOLVED: add background-clip: border-area

Discussion.

Comment 1

[Daniel Holbert [:dholbert]]

fantasai mentioned in IRC as a simple definition of the clipping area here:

fantasai If you paint background: url(red-swatch) border-box, url(blue-swatch) padding-box, the part that's red is the part we're proposing to clip to

("red-swatch"/"blue-swatch" here are hand-wavy placeholders representing images here, of course)

Comment 2

[Daniel Holbert [:dholbert]]

See also https://github.com/w3c/csswg-drafts/issues/11167#issuecomment-2474360495 for a minor update/clarification to how this works in the background shorthand property.

Comment 3

[Daniel Holbert [:dholbert]]

[assessing this as "Medium" size-estimate; a lot of the work is graphics, but it's just a clip so we're thinking not too bad.]

Comment 4

[一丝]

@Emilio I’m glad to see that Firefox has made progress on background-clip: border-area (bug 2045230)—this is exciting news.

Just as gradient borders were added in Nova’s new UI, they’re now everywhere, and border-area makes implementing this kind of UI much simpler and more user-friendly.

Jason and I have already shipped this feature in Chrome 150, and we hope Firefox can catch up.

https://chromestatus.com/feature/6234471210811392

Comment 5

[Christophe Coevoet]

is https://bugzilla.mozilla.org/show_bug.cgi?id=2003757 a duplicate with separate tracking ?