title: IE11 blurry right hand edge of DIV with border-radius
body: <p>I have a problem in IE 11 (On Windows 7) where the right hand edge of a DIV that has a border-radius specified looks blurry.  Take a look at this example:-</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Test Page&lt;/title&gt;
      &lt;style&gt;
          body {
              background-color: red;
          }
          .Container {
              background-color: black;
              margin-left: auto;
              margin-right: auto;
              padding-left: 25px;
              padding-right: 25px;
              padding-top: 10px;
              min-height: 300px;
              width: 600px;
          }
          .Surround {
              background-color: lightgreen;
              border-radius: 7px;
              float: left;
              padding: 6px;
              width: 588px;
          }
          .Inner {
              background-color: blue;
              border-radius: 7px;
              color: white;
              float: left;
              width: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="Container"&gt;
          &lt;div class="Surround"&gt;
              &lt;div class="Inner"&gt;
                  &lt;h2&gt;Test&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>To start off, the page usually looks fine.  However, resize the page so that the vertical scrollbar comes on (by making the page small enough to go into the Black DIV section).  You should then notice that the right hand edge of both the Blue and Green boxes have gone blurry.</p>
  
  <p>Note: Sometimes the page is blurry to begin with and goes sharp when you enable the vertical scrollbar, it just seems to depend on the size of the IE page.</p>
  
  <p>If I get rid of border-radius it fixes the problem.  If I get rid of the margin-left and margin-right auto's so the page is aligned on the left it fixes the problem.  So it seems to be a combination of centred pages with a border-radius specified.</p>
  
  <p>Anyone know how to solve this issue?  I am assuming it is an IE 11 bug as it works fine in IE 10, IE 9, Chrome, Firefox.</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/UjpSe/" rel="nofollow noreferrer">http://jsfiddle.net/UjpSe/</a></p>
  
  <p>I've since tried this on a 3rd IE 11 machine on Windows 7 and it only goes wrong on 2 of the machines.  So not sure if it might be a setting/graphic card related.</p>
  
  <p>The JSFIDDLE above I can get it to go wrong with, as long as the Window is sufficiently sized so that the DIV is centred in the page and you can enable the vertical scrollbar with resizing.</p>
  
  <p>Edit: Images added as requested.  I've resized the page down from 600px wide to 300px to fit in Stack Overflow.  First image has blurry right edge...</p>
  
  <p><img src="https://i.stack.imgur.com/111zG.jpg" alt="Blurry"></p>
  
  <p>Exact same page does not have a right blurry edge when page is resized to not have a scrollbar...</p>
  
  <p><img src="https://i.stack.imgur.com/qsfA9.jpg" alt="Not Blurry"></p>