[csswg-drafts] [css-backgrounds] possible examples/diagrams for `border-image` (#7608)

jsnkuhn has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds] possible examples/diagrams for `border-image` ==
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

![Screenshot 2022-07-30 at 08-30-02 XWEpxVM](https://user-images.githubusercontent.com/1286791/184700343-9cde6fbc-68ca-4fbf-9fd4-eb89a7d28f4e.png)


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

![Screenshot 2022-07-30 at 08-46-52 VwzZVEP](https://user-images.githubusercontent.com/1286791/184700372-fd09006e-adea-4c17-8c53-ef23652d45e0.png)

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

![Screenshot 2022-07-30 at 08-56-04 Repeating-linear-gradient border-image](https://user-images.githubusercontent.com/1286791/184700413-de36ffcc-eff9-476d-b525-8e067b8a5c0e.png)

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

![border-image-outset](https://user-images.githubusercontent.com/1286791/184700441-7dfaec0f-8c34-4d69-984b-fb7f006cbf8b.png)


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

![border-image-shorthand-labeled](https://user-images.githubusercontent.com/1286791/184700578-f107096f-541b-4ca1-a4a3-51251f7b50ec.png)


`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 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7608 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 15 August 2022 19:12:46 UTC