Parent’s background shows around the child’s border-radius when the parent has overflow:hidden

Question

This is an expansion on the question I asked a little while ago. However this time the problem is more specific and closer to the real case I am struggling with.

If there is an element inside another element, and both the parent and the child elements have a border-radius, and the parent’s background is different from the child’s, it gets visible around the child‘s rounded corners.

The problem is aggravated if the parent element has the overflow: hidden property on it. Then the solution that involves making the border-radius of the child element smaller than that of the parent element does not work any longer.

Example on CodePen: http://codepen.io/azangru/pen/pgmOvJ (observe the yellow background showing from below the child element’s black background).

Html:

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
    <div class='some-text'>
      This is text. There can be quite a decent amount of text here, so the outer div needs to have overflow: hidden. Like this, you see?
    </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;
  overflow: hidden;
}

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

.inner {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 10px 10px 0 0;
}
.some-text {
  margin-top: 20px;
  padding: 0 10px;
}

Is there a way to make the child’s background cover the parent’s background completely?

(of course, an obvious solution would be to remove the overflow: hidden property from the parent and add another container for the text, which in its turn will have overflow: hidden. However, I would really prefer not to go that way if possible)

Answer 1

The cause of this is that the border of the background is antialiased, and then allows a certain amount of blending thru it.

It can be somehow be made less visible applying a transform: translateZ(0px) to the inner element.

A less general, but more effective solution, is to apply a shadow to inner

Seems also that a pseudo element, cloning the base element properties, can solve the issue

/*
.inner {
    box-shadow: 0px 0px 0px 1px black;  
}
*/


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;
  overflow: hidden;
}

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

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

.inner:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.some-text {
  margin-top: 20px;
  padding: 0 10px;
}

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
    <div class='some-text'>
      This is text. There can be quite a decent amount of text here, so the outer div needs to have overflow: hidden. Like this, you see?
    </div>
  </div>
</div>