[css-images][css-backgrounds] make border-image and border-radius work together #7550
Description
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