Como funciona border-radius
Cada esquina é un cuarto de elipse. Cun só valor, como border-radius: 24px, a elipse é un círculo de 24 px
de raio e as catro esquinas quedan iguais. Con catro valores repártense no sentido das agullas do reloxo comezando
por arriba á esquerda: superior-esquerda superior-dereita inferior-dereita inferior-esquerda. Se faltan
valores, cópianse do oposto, igual que en margin: por iso 0 120px dá unha folla.
A sintaxe de oito valores e as formas orgánicas
Despois da barra van os raios verticais: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Así cada
esquina deixa de ser un arco de círculo e pasa a ser un arco de elipse con dous raios distintos, que é como se fan os
blobs das webs modernas sen unha soa imaxe nin un SVG. O modo «Forma libre» traballa sempre en porcentaxes,
porque así a forma mantense aínda que cambie o tamaño do elemento.
px ou %: cal usar
- px para botóns, tarxetas e campos: o arredondado é o mesmo sexa cal sexa o tamaño.
- 50 % para círculos (nun cadrado) e elipses (nun rectángulo).
- Un valor enorme, como
999px, para pílulas: o navegador limítao á metade do lado curto e os extremos quedan perfectamente redondos, sexa cal sexa o ancho.
Arredondar imaxes
border-radius recorta tamén o contido dunha <img>, así que abonda para facer avatares
redondos (border-radius: 50% sobre unha imaxe cadrada). Se o elemento ten fillos que saen polas esquinas,
engade overflow: hidden. A vista previa usa unha imaxe do xerador de ximg.es, que podes
pedir do tamaño exacto da túa maqueta:
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">