CSS wrong appearance of border-radius on a nested div

Part 1 of the problem: (Child becoming a round in original demo)

The problem is because of the box-sizing: border-box. When this is set, the defined height, width of the box (250 x 250px) is considered as inclusive of the width of the border and the padding. So, the element’s actual content area is only 200px x 200px (excluding 50px for horizontal & vertical borders).

Thus the child div will only have a size of 200px x 200px (this can be verified in Dev tools). When a border-radius of 100px is inherited from parent, it becomes a round as that is half of its dimensions.

So, the border-radius cannot be inherited for the child if the shape has to be maintained. It should be set as 80px (approximate). (Initially I had mentioned that a value of 76px was working better and that I was trying to find out the reason for it – please refer to Part 2 for the reason.)

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper-target"       
     style="position:absolute;
            top:100px;left:100px;
            width:250px;height:250px;
            border-radius:100px;
            border:25px solid red;">
  <div id="target" 
       style="position:relative;
              width:100%;height:100%;
              background-color:plum;
              border-radius:76px;">
  </div>
</div>

Part 2 of the problem: (even when border-box is removed, it leaves a gap)

This is because the assigned border-radius is the radius of the outer border and not that of the inner border. The inner border radius is calculated as outer border radius minus border thickness.

As per spec:

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.

So, the child’s border-radius need to be equal to the inner border radius of the parent. That is, the child’s border-radius should be 75px (100px – 25px thickness of border).

This is also why a border-radius of 76px worked better than the 80px as mentioned earlier. 76px is closer to 75px than 80px 🙂

Solution without changing border radius of target:

If border-radius: inherit on the child (target) cannot be changed then the only option is to make the child the same dimensions as parent (using calc), positioning it and then clipping the overflow in parent.

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper-target" style="position:absolute;
            top:100px;left:100px;
            width:250px;height:250px;
            border-radius:100px;
            border:25px solid red;
            overflow: hidden;">
  <div id="target" style="position:relative;
              width:calc(100% + 50px);height: calc(100% + 50px);
              top: -25px; left: -25px;
              background-color:plum;
              border-radius:inherit;">
  </div>
</div>