title: Why does Chrome always add a 1px border-radius, even when specific corners are set to 0px?
body: <p>When you apply a <code>border-radius</code> to an element in Google Chrome, I've noticed that <strong>all</strong> corners get a subtle 1px rounded corner, even if specific corners are set to 0px.</p>
  
  <p>Consider the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
  .box1 { border-radius: 0; }
  .box2 { border-radius: 1px; }
  .box3 { border-radius: 0 0 5px 5px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box box1"&gt;&lt;/div&gt;
  &lt;div class="box box2"&gt;&lt;/div&gt;
  &lt;div class="box box3"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first two boxes are the controls for this experiment; as we would expect, box #1 has nice sharp corners, and box #2 has subtle 1px rounded corners. So far so good.</p>
  
  <p>The strange thing is that box #3 <strong>also has 1px rounded corners on top</strong>, in spite of its border-radius value being <code>0 0 5px 5px</code>. If you look at the computed values in the dev tools, both <code>border-top-left-radius</code> and <code>border-top-right-radius</code> are correctly set to 0px, but they are rendering as if they're set to 1px.</p>
  
  <p>You need an eagle eye to see it, but it's definitely there. Here's a screenshot of the page in Chrome that I magnified using Photoshop to make it easier to see:</p>
  
  <p><a href="https://i.stack.imgur.com/N3pN6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N3pN6.png" alt="Magnified screenshot of the problem"></a></p>
  
  <p>Notice that the top corners on box #3 are a softer/whiter gray than the rest of the border. They're identical to the 1px rounded corners of box #2, even though they're set to 0px.</p>
  
  <p>Why is Chrome doing this, and how can I prevent it?</p>
  
  <p>For the record, I'm on Windows 10 and I'm using the latest version of Chrome (v74.0.3729.108). The problem only exists in Chrome, not Firefox or Edge. I'm not sure if this is WebKit problem, or something specific to Chrome/PC.</p>