title: CSS consistent border spacing across browsers
body: <p>I've created a dashed border-left to go around some content, but after testing it across browsers the spacing across each dash is inconsistent. I've done some searching but haven't been able to find a solution to this.</p>
  <p>Chrome:</p>
  <p><a href="https://i.stack.imgur.com/djaci.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/djaci.png" alt="chrome result" /></a></p>
  <p>Firefox:</p>
  <p><a href="https://i.stack.imgur.com/ObZQu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ObZQu.png" alt="firefox result" /></a></p>
  <p>Styling:</p>
  <pre><code>.border {
  border-left: 2px dashed black;
  border-radius: 10%/200px
  }
  </code></pre>
  <pre><code>&lt;div class=&quot;border&quot;&gt;&lt;/div&gt;
  </code></pre>