svg dashed border

HTML

<svg viewbox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect class="red"/>
  <rect class="blue"/>
  <rect class="white"/>
  <!--<rect class="white-2"/>-->
</svg>

CSS

svg {
   
  top: 10px;
  left: 10px;
  
  fill: none;
  width: 500px;
  height: 500px;
}

.red,
.blue,
.white {
  x: 10px;
  y: 10px;
  
  height: 150px;
  width: 150px;
}

.red {
  stroke: red;
  stroke-width: 5;
  stroke-dasharray: 0,0,0;
}

.white {
 stroke: white;
 stroke-width: 6px;
 stroke-dasharray: 5,5,5;
}

.blue {
 stroke: blue;
 stroke-width: 5;
 stroke-dasharray: 10,10,10;
}

.white-2 {
 stroke: white;
 stroke-width: 6px;
 stroke-dasharray: 15,15,15;
}