Internet explorer 11 shows background when using a border radius

Question

IE 11 (11.0.9600.18350) seems to have some problems when using rounded borders. I made a minimal script: https://jsfiddle.net/7phqrack/2/

HTML:

<div class="backgrounddiv">
  <div class="outer">
    <span id="span1">some content</span>
    <div class="inner">
      <span id="span2">more content in a nested div</span>
    </div>
  </div>
  <div class="outer">
    <span id="span1">some other content</span>
  </div>
</div>

style:

.backgrounddiv{
  background: black;
}
.outer{
  border-radius: 4px 4px 0px 0px;
  background: white;
}
.inner{
  background: white;

}

At some zoom levels (130% on my machine), the background is displayed between the two dividers (as well as on the upper border). Other browsers do not display a black line between divs.

Does anyone know how to solve this problem?

Answer 1

This question has already been asked:

• Question 1
• Question 2

This seems to be a bug in IE11.

Answer 2

, Internet Explorer:

.outer{
  border-radius: 4px 4px 0px 0px;
  background: white;
  border:0;
  outline:none;
}