0

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.

kfir
  • 732
  • 10
  • 22
  • Does this answer your question? [How to set a stroke-width:1 on only certain sides of SVG shapes?](https://stackoverflow.com/questions/8976791/how-to-set-a-stroke-width1-on-only-certain-sides-of-svg-shapes) – ATP Dec 24 '22 at 16:57
  • @ATP no, because its static by pixels i have responsive box without specific width and height – kfir Dec 24 '22 at 17:49
  • 2
    `border-top` doesn't work because SVG's don't use borders, they use strokes. The only thing you can do about it is either putting something over it or placing the SVG partially out of view.. – ninadepina Dec 24 '22 at 18:47

1 Answers1

1

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>
Kosh
  • 16,966
  • 2
  • 19
  • 34