5

How come when I put border-radius on a certain element in a certain file, it's not being rendered correctly with a border-radius and has a red curly line beneath the border-radius property in Internet Explorer 11?

enter image description here

When I try to do the same in my own custom HTML file:

<div style="width: 100px; height: 100px; background-color: red; border-radius: 5px;"></div>

Internet Explorer does not have any problems rounding those edges?

enter image description here

Can anyone tell me what is going on, since I never work with Internet Explorer myself?

Does a red curly line beneath a CSS property in Internet Explorer mean it does not recognize the property?

7
  • Does it work in other browsers? Are you copying and pasting the border-radius text (possibly invisible/zero-width characters are being preserved from somewhere)? Feb 19, 2016 at 15:34
  • You're adding it to your link on hover. Is this indented? Or do you want this to show all the time? When you add it in-line, you're adding it to a <div> but in your CSS, you're adding it to an <a>
    – ntgCleaner
    Feb 19, 2016 at 15:34
  • Are you running in compatibility mode?
    – JDB
    Feb 19, 2016 at 15:34
  • 3
    Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
    – Paulie_D
    Feb 19, 2016 at 15:36
  • doesn't display:block on a element help?
    – Gene R
    Feb 19, 2016 at 15:40

2 Answers 2

8

The curly line in IE Inspector only appears, when Emulation mode is set to IE8 or below - thus indicating that this property is not supoorted in current mode.

If you are using IE11 in Edge mode, however, you might have some meta-attribute which force compatibility mode like

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Or, perhaps your windows client is configured to use comaptibility mode by default,
see this answer for details:
Internet Explorer 11 disable "display intranet sites in compatibility view" via meta tag not working

2
  • This was what was happening to the page I was viewing. Seems like the previous developer of the page left me this messy tag. Thank you for this answer.
    – Barrosy
    Feb 22, 2016 at 8:15
  • This just happened to me. It's an ASP.NET page that was configured to be compatible with IE7. Yes you read that right, IE7 which was released in 2006. I am not able to change it either without a formal testing process to certify the page would still work! :-o Dec 18, 2020 at 15:14
0

Try to disable IE11’s Compatibility View by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox.

1
  • what if your app NEEDs comp mode?
    – T.S.
    Aug 14, 2020 at 0:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.