JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <rect x =10 y=10 id=a ></rect>
  <rect x = 10 y=170 id=b class=round></rect>
  <rect x=170 y=10 id=c ></rect>
  <rect x=170 y=170 id=d class=round></rect>
  
</svg>

CSS

svg{
  width:400px;
  height:400px
}
rect {
  width: 150px;
  height: 150px;
  stroke-width:4px;
  stroke:black;
  fill:red;
  stroke-dasharray: 150 150;
}
.round{
  rx:20px;
  ry:20px;
}
#c, #d{
  stroke-dashoffset: 40px;
}