Wednesday, March 05, 2014

Fix: CSS border-radius not working in Internet Explorer 11

In doing browser compatibility testing in a new web form I was developing on my PC this morning, the form looked great in all browsers I had on my local Windows 8.1 PC – except for Internet Explorer 11, where it looked awful: div and form field border corners were squared instead of rounded, form fields rendered with excess height, some text was slightly truncated, and a few other issues.

When I looked at the CSS styles in use on the page in IE11’s built-in F12 developer tools, I noticed that the border-radius property on my form’s enclosing div was present, but it was missing its enable/disable checkbox, and the name of the style was shown with a red squiggle underline, as though IE didn’t recognize it.  It seemed almost as though IE11 was behaving like a legacy browser that didn’t recognize that newer CSS property.

In fact, that did turn out to be exactly the problem. IE11 was rendering the form (running on my local IIS) with its legacy “Compatibility View” engine, which it is by default configured to do for intranet sites.  (Oddly, my IE11 was not using Compatibility View to render another copy of the form that I was trying to use to debug the issue that I had IE loading via the “localhost” domain, which had me confused for a while.)

The solution was to disable IE11’s Compatibility View for intranet sites by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox.  Making that configuration change immediately got IE11 to start rendering the page properly.

Posted by at 3/05/2014
Labels: , ,

47 comments:

  1. Anonymous3/24/2014 2:28 PM

    Thanks so much for this: you just saved my employer the cost of a new computer office window and possible lawsuit related to debris falling on the street below my office.

    ReplyDelete
  2. Anonymous5/27/2014 4:45 PM

    Thanks for the tip. I was having the same problem. I wonder how many tweaks I gave up using on the company's website just because it did not looked compatible on ie.

    ReplyDelete
  3. Anonymous8/08/2014 9:44 PM

    Yay - thank you!

    ReplyDelete
  4. Unknown8/13/2014 9:25 AM

    Thanks a ton! Now if only other intranet users didn't have to go through this step :(

    ReplyDelete
  5. Anonymous8/15/2014 4:35 AM

    Hours I spent. Bloody hours. Why the clart was it rendering as IE5???? I'd buy you a drink if I could.

    ReplyDelete
  6. Anonymous8/18/2014 9:47 AM

    Thanks, this helped me as well! If I could ask a question, my ie is still not picking up my CSS styles though, how do I fix that, I tried: html data-useragent
    but still not working

    Any help would be appreciated

    ReplyDelete
  7. Anonymous8/22/2014 5:33 AM

    Thanks :-)

    Gracias, desactivandolo me funciono :)

    ReplyDelete
  8. Anonymous8/30/2014 10:10 PM

    Oh my god. You legend! Can not thank you enough!

    ReplyDelete
  9. Anonymous9/22/2014 7:06 PM

    Not in a million years would I have thought of this. I figured it was some compatibility thing and was going nuts. Thanks!

    ReplyDelete
  10. Unknown9/30/2014 5:24 AM

    Thank you very very much

    ReplyDelete
  11. Anonymous10/13/2014 4:25 AM

    I thought I have finally got the answer for hours I spent (even just realizing it was the border-radius), yet working with Windows 8.1 and Internet Explorer 11, I still have an X pattern that crosses over all elements with radius-border (with F12 tools, if I remove the border-radius the issue is fixed) also after following your tip. It doesn't happen with Chrome on that same OS.
    I am speaking from a user point-of-view, and hopefully someone has an insight about it.

    ReplyDelete
  12. Anonymous10/22/2014 1:23 PM

    Спасибо тебе добрый человек! Ты помог мне!

    ReplyDelete
  13. Jon Schneider10/23/2014 9:06 AM

    Пожалуйста!

    ReplyDelete
  14. Anonymous12/10/2014 1:47 PM

    Thanks a lot!

    ReplyDelete
  15. Anonymous3/11/2015 11:18 AM

    Thank you very much!

    ReplyDelete
  16. Anonymous3/30/2015 2:54 PM

    Thank you!

    ReplyDelete
  17. Anonymous4/08/2015 9:59 AM

    Thank you for saving my sanity :)

    ReplyDelete
  18. Anonymous4/26/2015 9:51 AM

    Thanks so much. Excellent solution.

    ReplyDelete
  19. Anonymous5/15/2015 12:29 PM

    Please guide me on this.
    I am running my application on ie 11 and border-radius works only when i run the application in incompatibility mode and whenever I try to run the application in compatible mode the image is again squared.
    I am working on asp.net, vs2010.
    thanks

    ReplyDelete
  20. Anonymous5/16/2015 9:00 PM

    Thank you so much!

    ReplyDelete
  21. Anonymous6/08/2015 11:04 AM

    This trick didnt work for me. But I did noticed that the IE 11 dev tool emulator was set to emulate IE 8 behavior. Once I switched it to Edge, border-radius worked like a charm.

    ReplyDelete
    Replies
    1. Anonymous9/16/2016 12:40 PM

      omg, mine was set to IE5 which is probably why nothing worked for me. thank you so much for this, you have no idea how many hours i spent troubleshooting and wondering why some tips worked for everybody else but me. :)

      Delete
  22. Anonymous6/15/2015 10:21 AM

    than you, save my life

    ReplyDelete
  23. Unknown6/15/2015 1:35 PM

    You saved my day.

    ReplyDelete
  24. Anonymous6/20/2015 9:20 AM

    I forgot about this - thanks for saving me hours!

    ReplyDelete
  25. Anonymous7/03/2015 8:03 AM

    Awesome! Thanks so much!!!

    ReplyDelete
  26. Anonymous7/21/2015 5:22 AM

    Brilliant, I have wasted so much time on this, It also fixed a giggling issue I had with an asp:menu.

    Thanks.

    ReplyDelete
  27. Anonymous8/05/2015 2:03 PM

    Like many others...I thank you for saving my precious hair from being ripped out of my head.

    ReplyDelete
  28. Anonymous8/15/2015 8:32 AM

    Thanks a lot. I wish that this is the first post I read regarding this issue. That could have really saved me some valuable time

    ReplyDelete
  29. MooneyLab12/01/2015 2:28 PM

    thanks

    ReplyDelete
  30. Anonymous12/19/2015 9:12 PM

    You're genius and even more so for posting this. Fixed me up right quick in a hurry like! One quick question though ... some pages NEED that compat mode, I don't see any way to list just a SINGLE page and NOT a whole website in the compat settings ... is there anyway you know of do just let a SINGLE page run in compat mode? Thanks again!!

    ReplyDelete
  31. Anonymous1/08/2016 11:26 AM

    I cannot begin to thank you enough! I have been toying with compatibility settings and changing css to no avail. All I needed to do was turn compatibility off!

    ReplyDelete
  32. Anonymous1/12/2016 2:53 AM

    I have wasted so much of time for this bloody problem.great thank you.

    ReplyDelete
  33. StarBittrune1/26/2016 1:44 PM

    THIS was the magic tag that made my page work. Thank you! I actually gasped when it worked. I've been fighting IE11 for two days. Gradients and rounded corners did not work until I set this meta tag.

    ReplyDelete
  34. Anonymous1/28/2016 4:33 PM

    You rock!!!

    ReplyDelete
  35. Joel2/25/2016 2:57 AM

    Hey, now that is really something. While the solution provided in the article requires the user to do something (over which you have no control), your solution is simply the gem I was looking for as it does the job perfectly.

    Thank you Anonymous :)

    ReplyDelete
  36. Unknown3/08/2016 8:02 AM

    geniooo!!!!!!!

    ReplyDelete
  37. Anonymous5/26/2016 10:33 AM

    Thanks!!!! This specifically didn't work for me because the inspector kept switching to IE8 but once I changed the version in the inspector it worked!! So much time wasted. Thanks again!

    ReplyDelete
  38. Unknown6/13/2016 1:45 PM

    Thank you for that solution. Learnt something.

    ReplyDelete
  39. Anonymous7/16/2016 8:47 PM

    I spent hours on a solution, but you probably saved me many days, thank you.

    ReplyDelete
  40. Unknown7/22/2016 11:03 AM

    Thank you very much! I had everything running under safari, chrome and firefox. All the sudden things stopped showing up different on IE 11 including functionality. This solved my problems!

    ReplyDelete
  41. Anonymous8/29/2016 9:19 AM

    Thanks man!

    ReplyDelete
  42. Unknown11/14/2016 11:33 AM

    This comment has been removed by the author.

    ReplyDelete
  43. Unknown11/14/2016 11:37 AM

    Great! It solved my problem too
    I wonder when sense to set it up from codebehind.

    ReplyDelete
  44. Anonymous1/27/2017 1:53 PM

    Thank you so much ...

    ReplyDelete
  45. Anonymous2/15/2017 6:10 PM

    Thank you very much! I almost ditched using a nice jQuery tooltip on our intranet site because of this issue.

    ReplyDelete
  46. Anonymous6/02/2017 5:16 AM

    Another solution is to force IE to not render in compatibility mode by putting this in the head section of your page:

    (meta http-equiv="X-UA-Compatible" content="IE=edge" /)

    Replace the brackets with HTML braces (I had to escape them that way for this message to post)

    Regards
    Julian C

    ReplyDelete

Non-spammers: Thanks for visiting! Please go ahead and leave a comment; I read them all!

Attention SPAMMERS: I review all comments before they get posted, and I REPORT 100% of spam comments to Google as spam! Why not avoid getting your account banned as quickly -- and save us both a little time -- by skipping this comment form and moving on to the next one on your list? Thanks, and I hope you have a great day!

Subscribe to: Post Comments (Atom)