css-examples icon indicating copy to clipboard operation
css-examples copied to clipboard

[Border-image generator] include gradient as border-image-source example

Open jsnkuhn opened this issue 3 years ago • 0 comments

All current examples on the border image generator ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator ) include linked images but it's possible to use gradients as border-image-source It would be nice to have an example of this.

The current blue striped border image (https://mdn.github.io/css-examples/tools/border-image-generator/border-image-5.png) seems like a perfect candidate to replace with a repeating-linear-gradient

border-image: repeating-linear-gradient(to bottom right, #97bde1 0 1px, transparent 2px 6.3px, #97bde1 7px 9.2px) 0 12 / 0px 12px repeat;

jsnkuhn avatar Jan 13 '22 01:01 jsnkuhn