Como calcular o raio da borda (border-radius) de elementos aninhados
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:
- Raio da borda do quadrado interno (Ri) + espaçamento entre os quadrados (E) = raio da borda do quadrado externo (Re);
- Raio da borda do quadrado externo (Re) - espaçamento entre os quadrados (E) = raio da borda do quadrado interno Ri.
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: