title: border 0 still leaves a black circle in firefox
body: <p>I have a circle that looks like</p>
  
  <pre><code>    margin:200,
      height: '10px',
      width: '10px',
      backgroundColor: '#000000',
      borderRadius: '50%',
      border:'0',
      display: 'inline-block',
      box-shadow: '0px 0px 10px 80px #000'
  </code></pre>
  
  <p>i've set the border into 0, but there is still a black circle. How do i remove that? <a href="https://i.stack.imgur.com/inJuN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/inJuN.png" alt="enter image description here"></a> </p>
  
  <p>'None' or 'Hidden' doesn't work either</p>
  
  <p>This is only a problem in firefox, chrome and safari is good</p>
  
  <p>An live example can be found here. If you open it in firefox you will see a circle near the center. This didn't happen in Chrome or Safari.
  <a href="https://codepen.io/jianyi-ren/pen/MqzdjP" rel="nofollow noreferrer">https://codepen.io/jianyi-ren/pen/MqzdjP</a></p>