Como calcular o raio da borda (border-radius) de elementos aninhados
![Como calcular o raio da borda (border-radius) de elementos aninhados](/_next/image?url=https%3A%2F%2Fpocketbase.douglasmoura.dev%2Fapi%2Ffiles%2Fquq9xznky3sx782%2F9p7f3beb3q7rqq5%2Fsteve_harvey_7_s3t_os424o_unsplash_SvL0QgOwpT.jpg&w=3840&q=75)
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: