Generador de border-radius CSS

Com utilitzar el generador de border-radius

1. Arrossega els punts de les vores de la Previsualització. Cada punt de color defineix el radi horitzontal d’una cantonada; si marques Cantonades el·líptiques (8 valors), els punts blancs defineixen els radis verticals.
2. També pots escriure els valors exactes a Cantonades: Superior esquerra, Superior dreta, Inferior dreta i Inferior esquerra, cadascuna amb un camp Horitzontal i un de Vertical.
3. Tria la Unitat: % (percentatge de la caixa) o px (píxels). En canviar-la, els valors actuals es converteixen i la forma es manté igual.
4. Indica l’Amplada de la caixa (px) i l’Alçada de la caixa (px) perquè coincideixin amb el teu element, i usa Totes les cantonades per arrodonir-les totes alhora.
5. Prova els Models (Arrodonit, Píndola, Cercle, Fulla, Gota, Ou, Entrada i tres blobs) o fes clic a Blob aleatori per obtenir una forma orgànica.
6. Marca Propietats desglossades si prefereixes les quatre declaracions border-*-radius i copia el Codi CSS amb Copia.

Teclat: selecciona un punt i prem les tecles de fletxa per canviar-ne el radi d’un en un (de deu en deu amb Maj).

Aquesta eina funciona al teu navegador. Res del que escrius s’envia a cap servidor.

La sintaxi de border-radius

border-radius admet d’un a quatre valors, en aquest ordre: superior esquerra, superior dreta, inferior dreta i inferior esquerra. Igual que passa amb els marges, els valors que falten es copien de la cantonada oposada: border-radius: 10px 20px arrodoneix la cantonada superior esquerra i la inferior dreta amb 10 px, i les altres dues amb 20 px. L’eina sempre escriu la forma equivalent més curta.

En realitat, cada cantonada és un quart d’el·lipse amb dos radis. Una barra separa els radis horitzontals dels verticals, i així s’arriba a un màxim de vuit valors:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Abans de la barra hi ha els radis horitzontals de les quatre cantonades; després, els verticals. Quan les dues llistes són iguals, la part de la barra s’omet.

Píxels o percentatges?

• px dona la mateixa corba sigui quina sigui la mida de l’element. És la millor opció per a botons, targetes i camps de formulari: border-radius: 8px.
• % és relatiu a l’element: els radis horitzontals depenen de l’amplada i els verticals, de l’alçada. Amb 50%, un quadrat es converteix en un cercle i un rectangle en una el·lipse. Els percentatges són el que fa que els blobs s’escalin amb l’element.

Per a un botó en forma de píndola, usa un radi en píxels d’almenys la meitat de l’alçada. El model Píndola ho fa exactament per a la mida de caixa que has indicat; també funciona un valor molt gran, com ara 999px.

Quan la suma de dos radis adjacents supera el costat que comparteixen, els navegadors redueixen tots els radis de manera proporcional fins que hi caben. Per això, si arrossegues dos punts l’un cap a l’altre, la forma no es trenca.

Formes de blob

Els models de blob i el Blob aleatori utilitzen vuit percentatges en què els dos punts de cada costat sumen 100 %. Així les corbes es troben exactament i la forma sembla un còdol llis. Si afegeixes una transition de CSS a border-radius, pots animar el pas d’un blob a un altre i aconseguir un efecte de transformació contínua.