Is there a way to prevent background of a parent element from showing up on the edge when both parent and child have a border radius?

问题

So let’s say we have a div inside another div; both the parent and child divs have the same border-radius, and the child’s width and height are 100% of the parent’s. If the parent has a background different from the child’s, a thin line of this background will be visible around the round corner of the child:

This is what it looks like:

Here is an example on 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;
}

Is there a way to prevent the parent’s background from showing up from behind the child (without removing the parent’s background completely I mean)?

回答1:

Try this:

  .inner {
     border-radius: 8px;
  }

Why? http://www.mrgeek.me/technology/tutorials/web-design/css3-border-radius-property-explained/

See it working:

http://codepen.io/anon/pen/RrmQeG

来源：https://stackoverflow.com/questions/35505746/is-there-a-way-to-prevent-background-of-a-parent-element-from-showing-up-on-the