title: Blurry background with border-radius on not pixel perfect top offset, in IE
body: <p>I have a page that sizes fonts dynamically depending on the width of the document.
  This results in heights that are not pixel perfect, but the browsers round them up.</p>
  
  <p>In Internet Explorer there's a problem.</p>
  
  <p>Normally, a background image starts from the edge of its element, the same pixel as the edge after it's top offset is rounded to pixels, but when <code>border-radius</code> is applied, the background starts from where the edge of the element would be if the top offset would not have been rounded, so the image may be blurry.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="FIRST"&gt;&lt;/div&gt;
  &lt;div class="SECOND"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>document.body.onresize = function () {
      document.body.style.fontSize = document.body.clientWidth / 100 + 'em';
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.FIRST {
      width: 200px;
      height: 1em;
      background-color: #000;
  }
  
  .SECOND {
      width: 200px;
      height: 21px;
      margin-top: 10px;
      background-image: url('data:image/gif;base64,R0lGODlhAQACAIAAAP////8AACH5BAAAAAAALAAAAAABAAIAAAICDAoAOw==');
      border-radius: 10px; /* if this is removed the background works as expected */
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/u8Bu8" rel="nofollow noreferrer">http://jsfiddle.net/u8Bu8</a></p>
  
  <h1>How do I make it not blur the background?</h1>
  
  <p>I'd like a CSS solution using the same HTML.</p>
  
  <p><em>That base64 GIF is just 1px wide and 2px high, top pixel red and bottom white.</em></p>
  
  <p><strong>Screenshot</strong></p>
  
  <p>Both sides from IE, magnified by two.</p>
  
  <p>The left side is what is expected, but depending on the width of the window sometimes you get what you see on the right side.</p>
  
  <p><img src="https://i.stack.imgur.com/0Biza.png" alt="Screenshot of Internet Explorer"></p>