internet explorer - IE 11 border-radius weirdness (did not occur in IE 9 and IE 10)

Question

I have searched for similar questions related to border-radius in IE 11, but only one found on the Microsoft IE Developer site 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.

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.

Example 1:

I have a border-radius: 5px 0 0 5px 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.

Example 2:

An <a> link button, displayed as inline-block has a linear-gradient for a background, a blue 1px solid border and border-radius: 4px. 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.

Example 3:

Three <a> link elements set to display: inline-block inside a <div> positioned relative to another <div> below it. The bottom <div> has a border-radius: 4px, and the <a> elements inside the top <div> have border-radius on the top left and right (shown). IE 11 displays a 1px gap between the two <div> elements (like shown in the other posters thread linked above). But if the border-radius on the bottom <div> is set to 0, the gap disappears.

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.

Any help would be greatly appreciated.

Answer 1

As far as I know there's a bug with border-radius in IE11. The issue you describe may be part of the bigger picture. More info.