The background of the parents shows around the border with the child when the parent has an overflow: hidden

Question

This is an extension to question , which I asked a little back. However, this time the problem is more specific and closer to the real case that I am struggling with.

If there is an element inside another element, and the parent and child elements have a border radius, and the original background is different from the child ones, it becomes visible around the rounded corners of the child.

The problem is compounded if the parent has a property on it overflow: hidden. Then a solution that assumes that the radius of the border of the child is smaller than that of the parent does not work anymore.

Example in CodePen: http://codepen.io/azangru/pen/pgmOvJ (pay attention to the yellow background showing the children below on a 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 for the childs background to completely overlap the parent background?

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

Answer 1

The reason for this is that the background border is smoothed and then allows some amount of blending through it.

Somehow, you can make the conversion: translateZ (0px) into an internal element less visible.

, -

, , ,

/*
.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>

Hide result