A propriedade border-radius permite arredondar as bordas de um elemento. Dar o mesmo valor de border-radius 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?

Observe a demonstração abaixo:

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:

1. Raio da borda do quadrado interno (R_i) + espaçamento entre os quadrados (E) = raio da borda do quadrado externo (R_e);
2. Raio da borda do quadrado externo (R_e) - espaçamento entre os quadrados (E) = raio da borda do quadrado interno R_i.

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.

Bônus

Neste exemplo interativo, feito por Jhey Tompkins, você pode ver como essa regra se aplica na prática:

Referências

• @jh3yy
• Tip: Perfect nested border radius in CSS
• CSS3 border-radius Property
• CSS Backgrounds and Borders Module Level 3