4

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?

SteeveDroz
  • 6,006
  • 6
  • 33
  • 65
  • not that I'm aware off CSS doesnt read other files with exception of @import – tacoshy Sep 17 '21 at 09:01
  • Oh no? What about `url('/some/path/to/image.svg')`? It reads it... – SteeveDroz Sep 17 '21 at 09:07
  • yes but then the SVG exist as a standalone SVG file which is one of the supproted images file. HTML is not an image file and specifcally ita a huge difference of using an image as backgroudn image or to find an svg element within your HTML file and convert that to an SVG image to use that as background-image. – tacoshy Sep 17 '21 at 09:14
  • Could you put up a simple example - CSS and HTML and the SVG - it's easier to explain what can be done then. – A Haworth Sep 17 '21 at 09:44
  • True, an example is always better. – SteeveDroz Sep 17 '21 at 09:51

1 Answers1

4

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>
chrwahl
  • 8,675
  • 2
  • 20
  • 30