title: Stroke SVG Path only inside or only outside
body: <p>Consider 2 html svg paths , a square (class <code>inside</code>) and a rectangle (class <code>outside</code>) having same height. When I apply <code>stroke-width: 10px</code>, the stroke gets applied <code>5px</code> inside and <code>5px</code> outside. <a href="https://jsfiddle.net/w3h5dmk0/9/" rel="noreferrer">Fiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/AVcXx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AVcXx.png" alt="enter image description here"></a></p>
  
  <p>How do I stroke only inside or only outside?</p>
  
  <pre><code>.inside { 
    stroke: #333;
    stroke-mode: inside;     // property does not exist
    stroke-width: 5px;
  }
  
  .outside {
     stroke: #333;
     stroke-mode: outside;   // property does not exist
     stroke-width: 5px;
  }
  </code></pre>
  
  <p>If there is no such property, is there a workaround to achieve something like:</p>
  
  <p><a href="https://i.stack.imgur.com/zQI8m.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zQI8m.png" alt="enter image description here"></a></p>