CODEWITHSUNDEEP
htmlcsssvg
Andrei Roba
Andrei Roba

Reputation: 2322

CSS background-image SVG capped on edges

I'm trying to use the dashed border generator but in the resulting SVG I noticed the edges are capped, any ideas how to avoid this?

.block {
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
}
<div class="block">
</div>

Upvotes: 0

Views: 58

Answers (1)

dogukankol
dogukankol

Reputation: 41

Can you try adding border-radius property ?.

.block {
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 100%;
}
<div class="block">
</div>

Upvotes: 1

Related Questions