Skip to content

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

Open
@jsnkuhn

Description

@jsnkuhn

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions