[css-images][css-backgrounds] make `border-image` and `border-radius` work together

[jsnkuhn]

trafficstars

Something that commonly pops up in conversations around border-image is that it does not function with border-radius. Example: Here is a recent article where border-image is listed as an honorable mention for a border animation because it can't be used with the border-radius https://web.dev/css-border-animations/#bonus-content:-border-image

I'm not sure why it wouldn't be possible to have a gradient as a border-image-source that follows the rounded corner. I can't find any mention of this interaction in the spec but it does seem consistent across browser that the border-radius is ignored

https://codepen.io/jsnkuhn/pen/eYMVOEG

https://drafts.csswg.org/css-images/ https://drafts.csswg.org/css-backgrounds/

...This also seems to have similar implications for corner-shape/ element-shape

[jsnkuhn]

the prototypical use case of a linear-gradient border-image with a border-radius:

https://crossbrowser.dev/

Example is accomplished with a primary element with a white background and a pseudo element panel with the gradient behind it. This places the border outside of the element which isn't an issue here but it could be in other cases

another way to accomplish this requires covering a border-box background "border" gradient with a padding-box image/color to cover the part of the gradient you don't want:

  border-radius: 12px;
  border: transparent 6px solid;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, red, orange) border-box;

Neither of these solutions is as simple and straightforward as a border-image combine with a border-radius would be

[jsnkuhn]

Kevin Powell released a Youtube video on border-image this week and there were 6 comments asking about why it doesn't work with border-radius: https://www.youtube.com/watch?v=ypstT5UfCsk

[jsnkuhn]

from the new Firefox View page. 2 instances of rounded corners with gradient borders. Accomplished similarly to the technique above except 2 elements not 2 background images.

[jsnkuhn]

also ran into a similar proposal to this thread over on discourse.wicg.io while googling for this github issue

https://discourse.wicg.io/t/proposal-respect-border-radius-for-border-image/4118

[bradkemper]

Well for one thing, border-radius affects the shape the border-box, but border-image-outset can put the image outside of the border-box, with some combination of opaque and transparent or partially-opaque pixels.

Also, it was nice to have border-radius as a fallback for when border-image wasn't supported or when images didn't load (although I can't recall if the didn't-load use case actually was made to work). The presumption was that the image would include its own corner shapes and shadows of its designs in the image.

[SelenIT]

It's already technically possible to make rounded-corners gradient border by combining border-image and border-mask with radial gradient (example). I admit that it's not a very intuitive solution though.

[jsnkuhn]

Unfortunately border-mask never made it into Firefox: https://caniuse.com/?search=border-mask

[jsnkuhn]

The presumption was that the image would include its own corner shapes and shadows of its designs in the image.

I can understand in theory why this presumption was made but it seems in practice that devs are unlikely to create these kinds of images for UI.

Well for one thing, border-radius affects the shape the border-box, but border-image-outset can put the image outside of the border-box, with some combination of opaque and transparent or partially-opaque pixels.

@bradkemper I think i'm following the explanation but i'm not sure why this is an issue.

[bradkemper]

Well for one thing, border-radius affects the shape the border-box, but border-image-outset can put the image outside of the border-box, with some combination of opaque and transparent or partially-opaque pixels.

@bradkemper I think i'm following the explanation but i'm not sure why this is an issue.

I mean, it sounds like you want the border-radius to clip the corners of the border image, but I don't know how that would work without also clipping the sides whenever they extend beyond the border box. And if they are clipping there, then how is border-image-outset meaningful?

I guess in theory you could have border-radius on the border image outset box instead of the border box, but that border image outset box is also not a good indicator of where the design in the image actually stops. So it would seem to have limited utility in the world of possible images (we were mostly considering raster images at the time we originally specced this), and probably not backward compatible if we tried to change it now.

[jsnkuhn]

would this be something that would be better off going along with outline then as it's independent of the box model? i.e. outline-image?

[fantasai]

@jsnkuhn The CSSWG recently resolved to add background-clip: border-area, see https://github.com/w3c/csswg-drafts/issues/9456 ; would this address the use cases here?

[jsnkuhn]

The addition of something like background-clip: border-area does cover the use cases above and many others. As mentioned in https://github.com/w3c/csswg-drafts/issues/9456#issuecomment-1853999247 using a background to make a border does feel a bit hacky but realistically, it looks more likely to get spec-ed and implemented more quickly than proper changes to border-image.