title: Why is the border funky when a radius is applied?
body: <p>I was messing around in HTML when I saw this small bug</p>
  <p>I made this button using SCSS and gave it a border radius of <code>5px</code>. If you're able to notice, there's a small curve where the border raidus is supposed to be.</p>
  <p><a href="https://i.stack.imgur.com/ziIP5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ziIP5.png" alt="Button" /></a></p>
  <p>Close up:</p>
  <p><a href="https://i.stack.imgur.com/w3Vma.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w3Vma.png" alt="Zoomed in version" /></a></p>
  <p>Why is this happening?</p>
  <h3>Code</h3>
  <pre class="lang-css prettyprint-override"><code>/* Button.scss file */
  
  @import &quot;../../util/variables&quot;;
  
  button {
      background-color: white;
      color: black;
      outline: none;
      border: 1px currentColor solid;
      padding: 0.3rem 0.85rem;
      border-radius: $border-radius;
  
      &amp;:hover {
          cursor: pointer;
      }
  
      &amp;.primary {
          background-color: $primary;
          color: $primary-text;
      }
  
      &amp;.secondary {
          background-color: $secondary;
          color: $secondary-text;
      }
  
      &amp;.block {
          display: block;
          width: 100%;
          margin-bottom: 0.5rem;
      }
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
  
  &lt;button
      class=&quot;button&quot;
  &gt;
      Login
  &lt;/button&gt;
  </code></pre>
  <p>EDIT:</p>
  <ul>
  <li><code>$primary</code> is <code>#283593</code></li>
  <li>I use firefox</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
       background-color: white;
       color: black;
       outline: none;
       border: 1px currentColor solid;
       padding: 0.3rem 0.85rem;
       border-radius: 5px;
  }
   button:hover {
       cursor: pointer;
  }
   button.primary {
       background-color: #283593;
       color: white;
  }
   button.block {
       display: block;
       width: 100%;
       margin-bottom: 0.5rem;
  }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="button primary"&gt;Login&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>