htmlcsssvgborder-image

Can I use a SVG element in the same file to display a border-image?

I have a <svg id="image"> in my HTML page and I would like to use that image as a border.

What I find online is that you can add in CSS:

border-image: url('/some/path/to/image.svg');

What I would like to do is to reference the SVG located in the page. Here is what I tried:

div {
  border: 10px solid;
  border-image: url('#round-rect');
  border-image-slice: 10;
}

svg {
  display: none;
}
<div>This should have rounded corners</div>

<svg id="round-rect">
<rect width="30" height="30" rx="10">
</svg>

Is there a way to do that?

Solution

  • You could include the SVG as a data URL.

    div {
  border: 10px solid;
  border-image: url('data:image/svg+xml,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="10" fill="red"/></svg>');
  border-image-slice: 10;
}
    <div>This should have rounded corners</div>