Cómo funciona border-radius
Cada esquina es un cuarto de elipse. Con un solo valor, como border-radius: 24px, la elipse es un círculo
de 24 px de radio y las cuatro esquinas quedan iguales. Con cuatro valores se reparten en el sentido de las agujas del
reloj empezando por arriba a la izquierda: superior-izquierda superior-derecha inferior-derecha inferior-izquierda.
Si faltan valores, se copian del opuesto, igual que en margin: por eso 0 120px da una hoja.
La sintaxis de ocho valores y las formas orgánicas
Detrás de la barra van los radios verticales: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Así cada
esquina deja de ser un arco de círculo y pasa a ser un arco de elipse con dos radios distintos, que es como se hacen
los blobs de las webs modernas sin una sola imagen ni un SVG. El modo «Forma libre» trabaja siempre en
porcentajes, porque así la forma se mantiene aunque cambie el tamaño del elemento.
px o %: cuál usar
- px para botones, tarjetas y campos: el redondeo es el mismo sea cual sea el tamaño.
- 50 % para círculos (en un cuadrado) y elipses (en un rectángulo).
- Un valor enorme, como
999px, para píldoras: el navegador lo limita a la mitad del lado corto y los extremos quedan perfectamente redondos, sea cual sea el ancho.
Redondear imágenes
border-radius recorta también el contenido de una <img>, así que basta para hacer
avatares redondos (border-radius: 50% sobre una imagen cuadrada). Si el elemento tiene hijos que se salen
por las esquinas, añade overflow: hidden. La vista previa usa una imagen del
generador de ximg.es, que puedes pedir del tamaño exacto de tu maqueta:
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">