Generatore di border-radius

Regola l'arrotondamento di ogni angolo e copia il codice border-radius. Attiva la modalità avanzata per dare a ogni angolo un raggio orizzontale e uno verticale diversi e creare forme organiche (blob).

Come funziona border-radius

border-radius accetta da uno a quattro valori, applicati in senso orario a partire dall'angolo in alto a sinistra: 10px arrotonda tutti gli angoli allo stesso modo; 10px 20px l'angolo in alto a sinistra e quello in basso a destra con 10px e gli altri due con 20px; e 10px 20px 30px 40px ciascuno separatamente. Esistono anche le proprietà singole, come border-top-left-radius.

Con una barra si indicano raggi diversi in orizzontale e in verticale, trasformando ogni angolo in un quarto di ellisse: 50% / 60% 60% 40% 40% disegna un uovo. Così si creano le forme organiche o «blob» tanto usate nel web design attuale.

Cerchi e pillole

Per un cerchio usa border-radius: 50% su un riquadro quadrato (se non è quadrato otterrai un'ellisse). Per una pillola o un pulsante con le estremità tonde, usa un valore in pixel maggiore di metà dell'altezza, come 999px: il browser lo limita automaticamente e la forma non si deforma quando cambia la larghezza.

Gli angoli arrotondati ritagliano anche lo sfondo e le ombre, ma non il contenuto che esce dal riquadro: per ritagliare un'immagine aggiungi overflow: hidden.