Border-radius not working in IE11

Question

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?

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?

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?

Answer 1

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