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

css, internet-explorer, internet-explorer-11

Solution

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.

Problem

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.

Original source

Related problems