Is there a way to prevent the background of the parent at the edge when the parent and child have a border radius?

Question

Is there a way to prevent the background of the parent at the edge when the parent and child have a border radius?

So, let's say we have a div inside another div; both the parent and the child div have the same border radius, and the width and height of the children is 100% of the parents. If the parent has a background other than the children, a thin line of this background will be visible around the child’s round corner:

It looks like this:

Here is an example in CodePen: http://codepen.io/azangru/pen/MKdQmG

And the code itself:

HTML:

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dark-bg {
  height: 100%;
  width: 100%;
  padding-top: 10px;
  background: black;
}

.outer {
  width: 200px;
  height: 200px;
  margin: auto;
  background: white;
  border-radius: 10px;
}

.middle {
  width: 100%;
  height: 100%;
  background: yellow;
  border-radius: 10px;
}

.inner {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 10px;
}