title: Default input borders in Chrome
body: <p>By default, input elements are styled with <code>border: 2px inset</code>. However, as long as the background is white, the border displays as a thin gray line (with <code>#eee</code> color). But if I change the background even the slightest (e.g. <code>#feffff</code>), the border suddenly changes to what you would expect from <code>2px inset</code>. What is causing this weird behavior?</p>
  
  <p>Here's an example (<a href="http://jsfiddle.net/ttb2fc1d/" rel="noreferrer">http://jsfiddle.net/ttb2fc1d/</a>):</p>
  
  <p>CSS</p>
  
  <pre><code>.border-test {
      display: inline-block;
      vertical-align: top;
      width: 50px;
      height: 50px;
      border: 2px inset;
      margin: 8px;
  }
  .gray {
      background-color: #feffff;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="border-test"&gt;&lt;/div&gt;
  &lt;input class="border-test"&gt;&lt;/input&gt;
  &lt;input class="border-test gray"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>This results in the first and third boxes having inset borders, while the second one has a thin-line border:</p>
  
  <p><img src="https://i.stack.imgur.com/ginea.png" alt="Borders"></p>