CODEWITHSUNDEEP
cssgoogle-chromesvg
Adam
Adam

Reputation: 5233

CSS: SVG Border Image Broken Rendering

It seems Chrome renders SVG border images strangely...

Example code: html

   .border-img{
        margin:100px;
        width:100px;
        height:30px;
        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: 40 40 40 40 fill;
        border-image-width: 10px;
        border-image-outset: 25px 10px;
        background-size: contain;
    }
    
    .border-img.ok {
        height: 31px
    }
    <div class="border-img">test content</div>
    <div class="border-img ok">test content</div>

enter image description here

As you can see, the border of the upper item is broken, just because its height is 30px while setting height to 31px fixes everything.

JSFiddle: https://jsfiddle.net/6mydfczo/17/

Is there any trick to fix svg borders to render correctly regardless of container's size?

Upvotes: 0

Views: 338

Answers (1)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

Seems like you have to define border property first (border: 10px solid white;) and then you can apply border image. See Code snippet example.

UPDATES: decrease dividing source svg to it's viewbox size (in this case). There is some issues with slicing: too many divides can occur issue with rendering only corners. As I can see in this MDN Web DOC page (scroll down to the example), if you slide to adjust border-image-slice=45 you will get your issue:

enter image description here

And even if you choose smaller number of slice it will be fine:

enter image description here

/* applying box sizing */
*, ::after, ::before {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.border-img {
  margin: 100px;
  width: 100px;
  height: 30px;
  border: 10px solid white;
  border-image-source: 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: 30 fill; /* decrease dividing source svg */
  border-image-width: 10px;
  border-image-outset: 25px 10px;
  border-image-repeat: stretch;
  background-size: contain;
}
<div class="d-flex">
  <div class="border-img">content 30</div>
  <div class="border-img" style="height: 31px;">content 31</div>
  <div class="border-img" style="height: 130px;">content 130</div>
  <div class="border-img" style="height: 130px; width: 200px;">content 130/200</div>
</div>

Upvotes: 1

Related Questions