Imposta border-radius CSS per ogni angolo con anteprima live e preimpostazioni
Un generatore di border-radius ti lascia arrotondare gli angoli di un elemento in modo visivo — regolando ogni angolo con cursori e guardando un'anteprima dal vivo — poi copiare il valore border-radius CSS esatto. Gli angoli arrotondati sono uno dei tocchi più comuni del design di interfacce moderno, addolcendo schede, pulsanti, campi e immagini, ma il CSS che li controlla può impostare ciascuno dei quattro angoli in modo indipendente e perfino renderli ellittici, cosa difficile da immaginare dai soli numeri. Trascinare un cursore e vedere la forma cambiare è molto più rapido che modificare valori alla cieca.
Il dettaglio che la maggior parte non sa è quanta gamma ha border-radius: oltre a un arrotondamento uniforme, puoi dare a ogni angolo il proprio raggio, e usare due valori per angolo per creare curve ellittiche invece che circolari — è così che si fanno le forme organiche e asimmetriche tipo "blob". Un raggio uguale abbastanza grande su un quadrato lo trasforma in un cerchio perfetto. Questo strumento genera CSS basato su standard nel browser con preset e controllo per angolo, pronto da incollare su qualsiasi elemento.
Sì. border-radius accetta fino a quattro valori, uno per angolo (in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra), quindi puoi arrotondarne alcuni e lasciarne altri quadrati, o dare a ciascuno una quantità diversa. Il generatore espone il controllo per angolo proprio per questo.
Imposta il border-radius a 50% (o a metà della larghezza dell'elemento in pixel) su un elemento quadrato. Poiché il raggio raggiunge il centro di ogni lato, gli angoli si fondono in un cerchio continuo. Una forma a pillola viene da un raggio grande su un elemento più largo che alto.
Un singolo valore crea un angolo circolare (quarto di cerchio); due valori danno all'angolo raggi orizzontale e verticale separati, producendo una curva ellittica. Combinare diversi valori ellittici su ogni angolo è come si fanno le forme morbide e organiche tipo "blob".
Sì. Un raggio in pixel è una dimensione fissa, mentre una percentuale è relativa alle dimensioni dell'elemento, quindi scala quando l'elemento viene ridimensionato. Le percentuali sono il motivo per cui 50% produce in modo affidabile un cerchio su qualsiasi quadrato, indipendentemente dalla sua dimensione reale.
Generatore ombra box CSS · Generatore Flexbox · Generatore CSS Grid · Generatore ombra testo CSS · Generatore animazioni CSS · Generatore filtri CSS