Com funciona border-radius
Cada cantonada és un quart d’el·lipse. Amb un sol valor, com border-radius: 24px, l’el·lipse és un cercle
de 24 px de radi i les quatre cantonades queden iguals. Amb quatre valors es reparteixen en el sentit de les agulles
del rellotge començant per dalt a l’esquerra: superior-esquerra superior-dreta inferior-dreta inferior-esquerra.
Si en falten, es copien de l’oposat, igual que a margin: per això 0 120px fa una fulla.
La sintaxi de vuit valors i les formes orgàniques
Després de la barra hi van els radis verticals: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Així
cada cantonada deixa de ser un arc de cercle i passa a ser un arc d’el·lipse amb dos radis diferents, que és com es fan
els blobs de les webs modernes sense cap imatge ni SVG. El mode «Forma lliure» treballa sempre en percentatges,
perquè així la forma es manté encara que canviï la mida de l’element.
px o %: quin cal fer servir
- px per a botons, targetes i camps: l’arrodoniment és el mateix sigui quina sigui la mida.
- 50 % per a cercles (en un quadrat) i el·lipses (en un rectangle).
- Un valor enorme, com
999px, per a píndoles: el navegador el limita a la meitat del costat curt i els extrems queden perfectament rodons, sigui quina sigui l’amplada.
Arrodonir imatges
border-radius també retalla el contingut d’una <img>, així que n’hi ha prou per fer
avatars rodons (border-radius: 50% sobre una imatge quadrada). Si l’element té fills que surten per les
cantonades, afegeix overflow: hidden. La vista prèvia fa servir una imatge del
generador d’ximg.es, que pots demanar de la mida exacta de la teva maqueta:
<img src="https://ximg.es/160x160" style="border-radius: 50%" alt="">