Generador de border-radius

Ajusta l'arrodoniment de cada cantonada i copia el codi border-radius. Activa el mode avançat per donar a cada cantonada un radi horitzontal i un de vertical diferents i crear formes orgàniques (blobs).

Com funciona border-radius

border-radius accepta d'un a quatre valors, que s'apliquen en el sentit de les agulles del rellotge començant per dalt a l'esquerra: 10px arrodoneix totes les cantonades igual; 10px 20px, la de dalt a l'esquerra i la de baix a la dreta amb 10px i les altres dues amb 20px; i 10px 20px 30px 40px, cadascuna per separat. També hi ha les propietats individuals, com border-top-left-radius.

Amb una barra s'indiquen radis diferents en horitzontal i en vertical, cosa que converteix cada cantonada en un quart d'el·lipse: 50% / 60% 60% 40% 40% dibuixa un ou. Així es creen les formes orgàniques o «blobs» tan habituals en el disseny web actual.

Cercles i píndoles

Per a un cercle fes servir border-radius: 50% en una caixa quadrada (si no ho és, sortirà una el·lipse). Per a una píndola o un botó amb els extrems rodons, fes servir un valor en píxels més gran que la meitat de l'alçada, com ara 999px: el navegador el limita automàticament i la forma no es deforma quan canvia l'amplada.

Les cantonades arrodonides també retallen el fons i les ombres, però no el contingut que surt de la caixa: per retallar una imatge, afegeix overflow: hidden.