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?
CodePudding user response:
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>