title: CSS 1px border stroke breaks around border radius
body: <p>This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?</p>
  
  <pre><code>background: rgba(32, 32, 32, .9);
  height: 30px;
  width: 30px;
  border: 1px solid white;
  border-radius: 20px;
  :hover {
   height: 300px;
   width: 200px;
  }
  </code></pre>
  
  <p>Images attached!</p>
  
  <p><img src="https://i.stack.imgur.com/prcNM.jpg" alt="enter image description here"></p>