2

#outer {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 20px;
}

#inner {
  width: 200px;
  height: 50px;
  background-color: steelblue;
  border-radius: 20px 20px 0 0;
}

body {
  background-color: steelblue;
}
<div id="outer">
  <div id="inner"></div>
</div>

You can see that the white background of the parent is leaking behind the child, even though they have the same border-radius. How can I prevent this?

Edit: Neither of the duplicate questions appropriately answer my question. The leak still happens in the first question. The second question's marked answer uses an image and Javascript, which should not be necessary to fix this.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Cras
  • 157
  • 8
  • Maybe https://stackoverflow.com/questions/5485207/border-radius-on-two-overlapping-elements-background-shines-through?rq=1 helps? – ggorlen Jun 26 '18 at 22:30
  • @ggorlen The accepted answer for that question uses javascript, which I would like to avoid. – Cras Jun 26 '18 at 22:31
  • @Cras that restriction might be worth mentioning in the post (although you did not tag JS, some folks might offer such a solution) – ggorlen Jun 26 '18 at 22:34
  • a better duplicate : https://stackoverflow.com/questions/19882283/pixelated-edge-around-a-css-circle-with-overflow-hidden – Temani Afif Jun 26 '18 at 22:39
  • @dippas you may notice that we have no border and no padding so padding-box/content-box and border-box (the default one) are all the same and it won't correct the issue – Temani Afif Jun 26 '18 at 22:50

1 Answers1

2

You can change the CSS to obtain a similar layout without this issue:

#outer {
  width: 200px;
  height: 200px;
  background:
   linear-gradient(to bottom,steelblue 50px,white 0);
  border-radius: 20px;
}


body {
  background-color: steelblue;
}
<div id="outer">
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415