CODEWITHSUNDEEP
htmlcssborder
kfir
kfir

Reputation: 810

How to remove top border from svg stroke

i created dashed border with some generator in the net, i trying to remove the top border but with no luck.

div {
    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' stroke='%23D8D8D8' stroke-width='2' stroke-dasharray='10%2c 18' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    width: 100%;
  min-height:400px;
    border-top: 0;
    padding-bottom: 20px;
}
<div></div>

i know that i need to change something in stroke-dasharray but dont know what, tnx for your help.

Upvotes: 0

Views: 521

Answers (1)

Kosh
Kosh

Reputation: 18393

Since your border is not actually CSS border but background, you might use background-position to shift the top "border" out of the view, and background-size to compensate the shift:

(I changed stroke color and added outline for better visualization)

div {
    background: 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' stroke='%23000' stroke-width='2' stroke-dasharray='10%2c 18' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
    no-repeat
    0 -2px / 100% calc(100% + 2px);
    
    width: 100%;
  min-height:400px;
    border-top: 0;
    padding-bottom: 20px;
    
    outline:solid 1px #f005;
}
<div></div>

Upvotes: 1

Related Questions