Ie11 Border Radius and Border Bug

Border-radius not working in IE11

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

IE11 - border-radius and box-shadow together cause problems

Updated to make it little Better.

As per your request from comment, here is a workaround for you using :after or :before of you div.

div {

  display: block;

  width: 500px;

  height: 200px;

  border: 1px solid black;

  border-radius: 5px;

  transition: box-shadow 1s;

  position: relative;

  background: #fff;

}

div:after {

  content: '';

  display: block;

  position: absolute;

  width: 500px;

  height: 200px;

  border-radius: 5px;

  background: #000;

  left: 0;

  top: 0;

  opacity: 0;

  transition: all 1s ease-in-out;

  z-index: -1;

}

div:hover:after {

  left: 25px;

  top: 25px;

  opacity: 1;

}

<div>Test</div>

Internet explorer 11 shows background when using border-radius

This question was already asked:

• Question 1
• Question 2

It seems to be a bug in IE11.

---

Related Topics