- From: jsnkuhn via GitHub <sysbot+gh@w3.org>
- Date: Thu, 08 Sep 2022 13:10:50 +0000
- To: public-css-archive@w3.org
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: ```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