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>