Douglas Moura

Douglas Moura

Engenheiro de Software

Douglas Moura

Douglas Moura

Engenheiro de software, músico and jiujiteiro

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

Publicado em:Publicado em:Atualizado em:

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:

  1. Raio da borda do quadrado interno (Ri) + espaçamento entre os quadrados (E) = raio da borda do quadrado externo (Re);
  2. 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:

Referências

Deixe um comentário

Carregando comentários...