title: IE 11 border-radius weirdness (did not occur in IE 9 and IE 10)
body: <p>I have searched for similar questions related to border-radius in IE 11, but <a href="http://social.msdn.microsoft.com/Forums/ie/en-US/a7808c7d-0178-4b10-b8b1-fbb06dd6ee28/ie-11-div-with-borderradius-bug?forum=iewebdevelopment" rel="noreferrer">only one found on the Microsoft IE Developer site</a> described what I am also currently experiencing since "upgrading" to IE 11. The answer to the post in that thread was to make certain the DOCTYPE was HTML5, and not Quirks.</p>
  
  <p>I am currently finishing a redesign on a website and yes, it's HTML5 and has the correct DOCTYPE, but I am still getting a weird problem with border-radius. There's a 1px offset to almost every element where I've applied a border-radius. If I uncheck border-radius, the problem disappears and all is fine, but shockingly this wasn't an issue in IE 9 or IE 10. Only since IE 11 a few days ago, has this problem surfaced. I have tested on both Windows 7 with IE 11 and Windows 8.1 with IE 11, and the problem exists on both.</p>
  
  <p>Example 1:</p>
  
  <p><img src="https://i.stack.imgur.com/zdCuP.png" alt=""></p>
  
  <p>I have a <code>border-radius: 5px 0 0 5px</code> here, and then apply separate pseudo elements :before and :after to get the pointed triangle, but the border-radius seems to be creating a 1px white line, so it's no longer flush with the rest of the element. This worked fine even in IE 8, but is now broken in IE 11. If I remove the border-radius, the pseudo element triangle becomes flush with the element again.</p>
  
  <p>Example 2:</p>
  
  <p><img src="https://i.stack.imgur.com/mXPyq.png" alt=""></p>
  
  <p>An <code>&lt;a&gt;</code> link button, displayed as inline-block has a linear-gradient for a background, a blue 1px solid border and <code>border-radius: 4px</code>. But the border-radius creates another 1px white line inside the blue 1px border. No matter any other border-radius value, the white line remains unless border-radius is 0.</p>
  
  <p>Example 3:</p>
  
  <p><img src="https://i.stack.imgur.com/s0tGK.png" alt=""></p>
  
  <p>Three <code>&lt;a&gt;</code> link elements set to <code>display: inline-block</code> inside a <code>&lt;div&gt;</code> positioned relative to another <code>&lt;div&gt;</code> below it. The bottom <code>&lt;div&gt;</code> has a <code>border-radius: 4px</code>, and the <code>&lt;a&gt;</code> elements inside the top <code>&lt;div&gt;</code> have border-radius on the top left and right (shown). IE 11 displays a 1px gap between the two <code>&lt;div&gt;</code> elements (like shown in the other posters thread linked above). But if the border-radius on the bottom <code>&lt;div&gt;</code> is set to 0, the gap disappears.</p>
  
  <p>Again, none of these instances were an issue in IE 9 and IE 10; only since IE 11 has this "1px gap" with elements having border-radius appeared. I don't know how to fix it. Of course no other browsers are affected. Firefox, Safari, Opera, and Chrome all display fine.</p>
  
  <p>Any help would be greatly appreciated.</p>