IE11 renders elements with border-radius incorrectly

9,260

Solution 1

This is a bug in IE11 that is is signaled several times in Microsoft Connect, but it does not seem as if Microsoft understands it.

I have been able to restore the correct display by adding the following line to the header:

<meta http-equiv="X-UA-Compatible" content="IE=10" />

This puts IE11 into IE10 compatibility mode, where border-radius is displayed correctly :

Solution 2

Disabling IE11’s Compatibility View may help :

Alt+T or Setting (gear icon)
Choose Compatibility View Settings
Uncheck the Display intranet sites in Compatibility View checkbox
Restart IE11

For more details, see the article Fix: CSS border-radius not working in Internet Explorer 11.

9,260

Author by

roelandvanbeek

Updated on September 18, 2022

Comments

roelandvanbeek over 1 year
My Internet Explorer 11.0.13 renders all css-elements with a positive border-radius incorrectly: it shows diagonal lines and shaded areas over the component, at times making it illegible. This happens on all pages. If I set the border-radius to 0 for these elements, they are rendered correctly. Here is a screenshot that shows the problem on Google's home page.

I turned off GPU rendering, but that did not solve the problem. Can anyone suggest other solutions, or at least tell me what this phenomenon is called, so that I can search for it?

I'm using Windows 8.1 Pro on an HP 840G.

Added 10 January 2015:

Here's a small example:
```
<!DOCTYPE html>
<html>
<head><style>
div {
    width: 50px;
    height: 50px;
    background-color: black;
}
</style></head>
<body>
<div style="border-radius:0px"></div><br>
<div style="border-radius:5px"></div><br>
<div style="border-radius:10px"></div><br>
<div style="border-radius:25px"></div>
</body>
</html>
```
This renders as follows:
- Kinnectus over 9 years
  
  Have you tried resetting IE through "Internet Options"?
- harrymc over 9 years
  
  Please post your html & css. You could also try the workarounds in this post.
- James P over 9 years
  
  @roelandvanbeek: You could try resetting your Windows theme in case it is corrupt since it is possible for it to cause glitches in IE.
- Ƭᴇcʜιᴇ007 over 9 years
  
  Does this also happen if you log in in Safe Mode (with Networking)? How about if you log into Normal Mode as a different user? Have you ensured your video drivers are up-to-date with the latest available version?
- jcoc611 over 9 years
  
  I know this might be less than ideal, but have you considered trying another browser to see if it behaves differently?
- Eric F over 9 years
  
  Does this happen in other programs or just IE? Try running a video card test and see if it appears then too. You need to narrow it down if it is app specific or something else.
- roelandvanbeek over 9 years
  
  @Ƭᴇcʜιᴇ007: yes, also happens in safe mode, also as a different user. Video drivers are up to date.
- roelandvanbeek over 9 years
  
  @EricF: I wish I knew how to narrow it down - if only someone could tell me how to describe this issue... Anyway, it doesn't happen in other browsers, only IE. It also happens in Skype in Metro interface, but I think the application runs on HTML5 and IE is rendering it.
- Kinnectus over 9 years
  
  What's your screen resolution set to? Is it correct for your monitor? What colour depth is your desktop (15-Bit, 16-Bit, 24-Bit, 32-Bit)? What happens if you connect an external monitor to the laptop?
- harrymc over 9 years
  
  This is probably a bug in IE11, but analyzing it requires posting your html & css (as I requested above but without any response from you).
- Eric F over 9 years
  
  As my solution suggests, along with harrymc, it probably has to do with your css
- roelandvanbeek over 9 years
  
  @harrymc Sorry, I probably didn't make clear that this happens on any page, for any element with non-zero border-radius. Either way, as per your request, I also added an example to the question.
roelandvanbeek over 9 years

Doesn't fix it. I think it's something more "elementary" than this, something related to rendering.
Shadow over 9 years

Your question was from over a month ago. Have you updated since then and has that fixed it?
roelandvanbeek over 9 years

I've been having the issue for a year now, no updates have fixed it.
roelandvanbeek over 9 years

Thanks, but this is abuot the Skype Desktop UI, I was talking about the Modern UI. The problem there is the same as in the examples in my question, not that the CSS is missing altogether.
roelandvanbeek over 9 years

Thanks, this seems to point at something. But that means that I have to view all websites in compatibility mode?
harrymc over 9 years

Apparently so, until Microsoft fixes the bug. Or use another browser (which, given the number of security risks discovered each year in IE, is IMHO a better solution).
roelandvanbeek over 9 years

I'm using Chrome for most purposes, but because some Windows apps (such as Skype) are using IE, I don't have a choice for them. Do you happen to be able to point at a bug report?
harrymc over 9 years

Yes, for example this one and this other one.