Re: [csswg-drafts] [css-backgrounds] background-clip: border-area (#9456)

@nt1m As @thebabydino mentioned, this does not clip the element at all, it's a `background` property. No, `border-clip` does not cover it, because that clips the border, it doesn't provide a way to specify gradients and patterns that are only applied to the border. [`stroke`](https://drafts.fxtf.org/fill-stroke-3/#stroke-paint) covers a lot of it, but that its a much more complex feature that has so far seen little implementor interest.

@thebabydino Your post made me wonder if what we actually need is `background-clip: border` instead of `border-area`, i.e. something that clips to the actual border *shape* specified by `border-style`. This satisfies strictly more use cases, since you can always get the `border-area` behavior by specifying a solid border. Main downside is that it increases implementation complexity, though I’m not sure by how much (@nt1m @emilio ?)

@fvsch Your code suffers from this issue primarily because it's specifying `background-clip` separately. If it used the shorthand things just take care of themselves automatically, without `@supports`:

```css
background: linear-gradient(to bottom, black, gray) border-area;
```

This reminded me, if we add this we should specify that if it's used in the shorthand as a single value it sets `background-origin` to `border-box`, since there's no corresponding `background-origin` value. This also increases the value-add for using the shorthand (since the vast majority of use cases require `background-origin: border-box`), making authors more likely to favor it over separate longhands.

@kizu It does *not* have the same issue as `background-clip: text` because it does not require making text transparent (only the border).

-----

Also CCing my css-backgrounds-4 co-editors @fantasai @SebastianZ 

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9456#issuecomment-1759658052 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 12 October 2023 13:53:40 UTC