SVG stroke on 1 side

by alfredopacino

HTML

<svg height="300"> 
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/> 
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/> 
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/> 
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/> 
    
      <line x1="0" y1="9" x2="200" y2="9" stroke="black"
          stroke-dasharray="40 10 50" />

</svg>

CSS

rect { fill: none; stroke: black; } 
.top { stroke-dasharray: 50,50 } 
.left { stroke-dasharray: 150,50 } 
.bottom { stroke-dasharray: 100,50 } 
.right { stroke-dasharray: 50,50,100 }