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