css-examples
css-examples copied to clipboard
[Border-image generator] include gradient as border-image-source example
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;