<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a> property allows you to round the edges of an element. Giving the same <code>border-radius</code> value to the parent element and child element doesn&#39;t result in the best appearance, so how do you calculate the border radius of nested elements?</p>
<p>Check out the demo below:</p>
<CodePen id="KKbzrER" />

<p>In the example above, the two circles have the same radius and are inscribed in squares with rounded edges. Note that the radius of the border is the same as the radius of the circle. We want the end of the arc of the circle each edge starts to be coincident with both squares. This can be done in two ways:</p>
<ol>
<li>Radius of the border of the inner square (R<sub>i</sub>) + spacing between squares (E) = radius of the border of the outer square (R<sub>e</sub>);</li>
<li>Outer square border radius (R<sub>e</sub>) - spacing between squares (E) = inner square border radius R<sub>i</sub>.</li>
</ol>
<p>Note that the center of the circles inscribed in the squares do not coincide, as well as the end of the border arc. Still, the result is satisfactory.</p>
<h2>Bonus</h2>
<p>In this interactive example, made by <a href="https://jhey.dev/">Jhey Tompkins</a>, you can see how this rule applies in practice:</p>
<CodePen user="jh3y" id="KKrYaxx" />

<h2>References</h2>
<ul>
<li><a href="https://twitter.com/jh3yy/status/1688542283602231296">@jh3yy</a></li>
<li><a href="https://www.30secondsofcode.org/css/s/nested-border-radius/">Tip: Perfect nested border radius in CSS</a></li>
<li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">CSS3 border-radius Property</a></li>
<li><a href="https://www.w3.org/TR/css-backgrounds-3/#corners">CSS Backgrounds and Borders Module Level 3</a></li>
</ul>


Douglas Moura

Douglas Moura

#CSS

How to calculate the border-radius of nested elements