<p>A propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a> permite arredondar as bordas de um elemento. Dar o mesmo valor de <code>border-radius</code> para o elemento pai e elemento filho não resulta na melhor aparência, então como calcular o raio da borda de elementos aninhados?</p>
<p>Observe a demonstração abaixo:</p>
<CodePen id="ExGaRJY" />

<p>No exemplo acima, os dois círculos possuem o mesmo raio e estão inscritos nos quadrados com bordas arredondas. Note que o raio da borda é o mesmo raio do círculo. Nós queremos que o fim do arco do círculo de cada borda comece seja coincidente com ambos os quadrados. Isso pode ser feito de duas formas:</p>
<ol>
<li>Raio da borda do quadrado interno (R<sub>i</sub>) + espaçamento entre os quadrados (E) = raio da borda do quadrado externo (R<sub>e</sub>);</li>
<li>Raio da borda do quadrado externo (R<sub>e</sub>) - espaçamento entre os quadrados (E) = raio da borda do quadrado interno R<sub>i</sub>.</li>
</ol>
<p>Observe que o centro dos círculos inscritos nos quadrados não coincidem, assim como o fim do arco da borda. Ainda assim, o resultado é satisfatório.</p>
<h2>Bônus</h2>
<p>Neste exemplo interativo, feito por <a href="https://jhey.dev/">Jhey Tompkins</a>, você pode ver como essa regra se aplica na prática:</p>
<CodePen user="jh3y" id="KKrYaxx" />

<h2>Referências</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

Como calcular o raio da borda (border-radius) de elementos aninhados