Making the last middle box/border line the same size as all the others

It’s larger than all the others, how would I make it the same size? While keeping everything even.

The middle is 10px while the outer border lines are all 6px.


<svg width="170" height="170" viewBox="0 0 170 170">
  <rect x="0" y="0" width="170" height="170" fill="red" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="teal" />
  <rect x="15" y="15" width="140" height="140" fill="black" />
  <rect x="20" y="20" width="130" height="130" fill="red" />
  <rect x="25" y="25" width="120" height="120" fill="black" />
  <rect x="30" y="30" width="110" height="110" fill="teal" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="red" />
  <rect x="45" y="45" width="80" height="80" fill="black" />
  <rect x="50" y="50" width="70" height="70" fill="teal" />
  <rect x="55" y="55" width="60" height="60" fill="black" />
  <rect x="60" y="60" width="50" height="50" fill="red" />
  <rect x="65" y="65" width="40" height="40" fill="black" />
  <rect x="70" y="70" width="30" height="30" fill="teal" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="red" />

The width of the border lines is 5px, so to make the middle square the same size, it would have to be 5x5 px, not 10x10.
The next squares would then be

  <rect x="70" y="70" width="25" height="25" fill="teal" />
  <rect x="75" y="75" width="15" height="15" fill="black" />

and so on. The whole thing would have a width of 165px, not 170.

What did I do wrong?


<svg width="165" height="165" viewBox="0 0 165 165">
  <rect x="0" y="0" width="165" height="165" fill="red" />
  <rect x="5" y="5" width="155" height="155" fill="black" />
  <rect x="10" y="10" width="145" height="145" fill="teal" />
  <rect x="15" y="15" width="135" height="135" fill="black" />
  <rect x="20" y="20" width="125" height="125" fill="red" />
  <rect x="25" y="25" width="115" height="115" fill="black" />
  <rect x="30" y="30" width="105" height="105" fill="teal" />
  <rect x="35" y="35" width="95" height="95" fill="black" />
  <rect x="40" y="40" width="85" height="85" fill="red" />
  <rect x="45" y="45" width="75" height="75" fill="black" />
  <rect x="50" y="50" width="65" height="65" fill="teal" />
  <rect x="55" y="55" width="55" height="55" fill="black" />
  <rect x="60" y="60" width="45" height="45" fill="red" />
  <rect x="65" y="65" width="35" height="35" fill="black" />
  <rect x="70" y="70" width="25" height="25" fill="teal" />
  <rect x="75" y="75" width="15" height="15" fill="black" />
  <rect x="80" y="80" width="5" height="5" fill="red" />

Nothing, doesn’t this look like what you wanted to achieve? Maybe increase the size of the svg element (leave everything else as it is) to see it better:

<svg width="500" height="500" viewBox="0 0 165 165">