Re: [csswg-drafts] [css-images][css-backgrounds] make `border-image` and `border-radius` work together (#7550)

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

https://crossbrowser.dev/

![image](https://user-images.githubusercontent.com/1286791/189125374-9fe54465-c5a8-4899-817e-49a19809457b.png)

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:

```css
  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

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


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

Received on Thursday, 8 September 2022 13:10:52 UTC