Como funciona o border-radius
Cada canto é um quarto de elipse. Com um único valor, como border-radius: 24px, a elipse é um círculo com
24 px de raio e os quatro cantos ficam iguais. Com quatro valores, distribuem-se no sentido dos ponteiros do relógio a
começar pelo canto superior esquerdo: superior-esquerdo superior-direito inferior-direito inferior-esquerdo.
Se faltarem valores, são copiados do canto oposto, tal como em margin: por isso 0 120px dá uma folha.
A sintaxe de oito valores e as formas orgânicas
Depois da barra vêm os raios verticais: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Assim, cada canto
deixa de ser um arco de círculo e passa a ser um arco de elipse com dois raios diferentes, que é como se fazem os
blobs dos sites modernos sem uma única imagem nem um SVG. O modo «Forma livre» trabalha sempre em percentagens,
para que a forma se mantenha mesmo que o tamanho do elemento mude.
px ou %: qual usar
- px para botões, cartões e campos: o arredondamento é o mesmo seja qual for o tamanho.
- 50 % para círculos (num quadrado) e elipses (num retângulo).
- Um valor enorme, como
999px, para pílulas: o navegador limita-o a metade do lado mais curto e as extremidades ficam perfeitamente redondas, seja qual for a largura.
Arredondar imagens
O border-radius também recorta o conteúdo de uma <img>, por isso basta para fazer avatares
redondos (border-radius: 50% sobre uma imagem quadrada). Se o elemento tiver filhos que saem pelos cantos,
acrescente overflow: hidden. A pré-visualização usa uma imagem do gerador ximg.es, que
pode ser pedida com o tamanho exato da maquete:
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">