JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <rect class="example" width="100%" height="100%" />
</svg>

SCSS

svg {
  --width: .4rem;

  width: 100%; height: 100%;

  rect {
    width: calc(100% - var(--width));
    height: calc(100% - var(--width));
    stroke-width: var(--width);
    x: calc(var(--width) / 2);
    y: calc(var(--width) / 2);

    rx: 1.2rem;
    ry: 1.2rem;
    stroke-dasharray: 10 6;
    stroke-linejoin: round;

    fill: none;
    stroke: red;
  }
}









html {
  font-size: 10px;
}

body {
  padding: 3rem;
}