title: Line/border with border-radius, overflow:hidden and colored background
body: <p>Please look at this JSFiddle: <a href="https://jsfiddle.net/fmhhg00d/3/" rel="noreferrer">https://jsfiddle.net/fmhhg00d/3/</a></p>
  
  <pre><code>&lt;div&gt;&lt;span&gt;•&lt;/span&gt;&lt;/div&gt;
  
  div {
   width: 500px;
   height:500px;
   background: blue;
   overflow: hidden;
   border-radius:50%; /* --&gt; Remove this and it's alright */
  }
  
  span {
   line-height:0.20;
   font-size: 2500px;
   color: white;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Z3xmx.png" rel="noreferrer">See the problem here</a></p>
  
  <p>In short, is there a reason why Chrome/Edge/Firefox all leave a small blue border when I use overflow:hidden and border-radius on the parent? Is there a way to bypass this?</p>