Element with border-radius inside element with border-radius is not consistent

Question

I have a layout that most likely can't be changed. I need to use border-radius on an element inside another element with border-radius. The purpose is to fill the white gap . The issue is that the corners of the child elements are overflowing, but I can't use overlow:hidden in this project, which is why I am trying with border-radius.

Here is a snippet to show my attempt: https://jsfiddle.net/5fgtL4so/5/

The issue is that inner border-radius of 30px does not have the same curve as outer border-radius. I don't want to hardcode this since it has to be responsive. I also tried to play around with width and margins as you can see on the snippet, but it does not seem to be the right way since I still have a small margin of error.

Any idea how to tackle this problem?

 .parent { border: 3px solid tomato; background-color: white; height: 200px; border-radius: 30px; }.child { border: 3px solid tomato; padding:10px; border-bottom: none; background-color: tomato; height: 100px; border-radius: 30px 30px 0 0; box-sizing: border-box; /* bellow solution is not perfect. There is still tiny white space around innter corners, it's a bit more visible on my project */ /* margin-left: -3px; width: calc(100% + 6px); */ }

 <div class="parent"> <div class="child"> </div> </div>

Answer 1

You can use inset box-shadow instead of border .

 .parent { /*border: 3px solid tomato;*/ background-color: white; height: 200px; border-radius: 30px; box-shadow: inset 0px 0px 0 3px tomato; }.child { border: 3px solid tomato; padding: 10px; border-bottom: none; background-color: tomato; height: 100px; border-radius: 30px 30px 0 0; box-sizing: border-box; }

 <div class="parent"> <div class="child"> </div> </div>

Also, your solution is works if you add margin-top: -3px also.

 .parent { border: 3px solid tomato; background-color: white; height: 200px; border-radius: 30px; }.child { border: 3px solid tomato; padding: 10px; border-bottom: none; background-color: tomato; height: 100px; border-radius: 30px 30px 0 0; box-sizing: border-box; margin-left: -3px; margin-top: -3px; width: calc(100% + 6px); }

 <div class="parent"> <div class="child"> </div> </div>

Answer 2

Although this is a bit late for this question, by setting the parent's overflow: hidden and removing the radius altogether from the child you can achieve what you need.

 .parent { border: 3px solid tomato; background-color: white; height: 200px; border-radius: 30px; overflow: hidden; }.child { border: 3px solid tomato; padding:10px; border-bottom: none; background-color: tomato; height: 100px; box-sizing: border-box; }

 <div class="parent"> <div class="child"> </div> </div>