How to remove top border from svg stroke-CodePudding

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,");
    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.

CodePudding user response：

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,")
    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>