[css-backgrounds] possible examples/diagrams for border-image

[jsnkuhn]

The border-image spec (https://drafts.csswg.org/css-backgrounds/#border-image) is currently light on examples. I wonder if some practice use cases would help folks understand what border-image is used for and maybe use it more?

here's a common corners only pattern Using SVG: https://codepen.io/jsnkuhn/pen/XWEpxVM?editors=1100

Gradient examples:

I don't think that gradient as border-image-source was always possible cross browser? This might explain the lack of examples. But pretty sure it has consistent support now

borders on just top and bottom: https://codepen.io/jsnkuhn/pen/VwzZVEP

repeating linear gradient barber pole left border: https://codepen.io/jsnkuhn/pen/WNRrYV?editors=0110

border-image-outset: https://codepen.io/jsnkuhn/pen/ZGodKB?editors=1100

border-image shorthand with labels: https://codepen.io/jsnkuhn/pen/eWzpyz

border-image shorthand area has no examples right now....

Should probably be similar to how background shorthand area in spec (https://drafts.csswg.org/css-backgrounds/#background) is handled

[jsnkuhn]

one of the main responses people give when I bring up corner-shape is "we don't need it because that is one of the primary use cases for border-image". So... seems like we should have some examples of that primary use case in the border-image spec.

https://codepen.io/jsnkuhn/pen/eYMQmoe?editors=0100

The filled shapes on the left side are pretty well usable at different corner sizes (as determined by border-image-width) and element sizes but the bordered examples aren't as adaptable. At different border-image-width values and element sizes the borders get stretched and squished. Maybe someone who's better with SVG might have an idea to deal with this?

These are good use case examples for the border-image-slice fill keyword.

[jsnkuhn]

bottom border gradient:

https://codepen.io/jsnkuhn/pen/PoRLoKG

[jsnkuhn]

overlapping border-image on grid items:

https://codepen.io/jsnkuhn/pen/QWmorWr?editors=1100

[fantasai]

These are very cool examples! I'm wondering which ones would make sense to actually integrate in the spec? We generally try to focus on illustrating what the spec is describing, rather than creating a gallery of cool uses. (Otherwise the spec would be mostly cool demos!) But a few examples are often really helpful, to show why features exist or what's possible or how things interact. Are there any particular examples you have here that you think would work well for making the spec more readable? https://www.w3.org/TR/css-backgrounds-3/#border-images

Btw, another place that might be useful to post demos is MDN, particularly if you're trying to get authors to see them: authors are much more likely to look there for examples than the specs, tbh. :)