Generatore CSS Border Radius
Crea qualsiasi forma con border-radius CSS - da semplici angoli arrotondati a blob organici complessi. Controlla tutti gli 8 valori indipendentemente, trascina i maniglioni visivi e copia il CSS pronto per la produzione.
Unità
Angoli
Impostazioni Anteprima
Anteprima dal Vivo
Trascina i maniglioni per regolareOutput CSS
Preset di Forme
Come Usare il Generatore Border Radius
Imposta i Valori degli Angoli
Usa i cursori per impostare il raggio di ogni angolo. Abilita la Modalità Fantasia per controllare indipendentemente i raggi orizzontali e verticali di ogni angolo per forme organiche.
Trascina i Maniglioni
Trascina i maniglioni blu direttamente sulla scatola di anteprima per regolare visivamente i raggi degli angoli. Intuitivo e preciso - proprio come gli strumenti di design.
Copia CSS
Copia il CSS abbreviato per codice compatto, o quello esteso per chiarezza esplicita per proprietà. Entrambi sono pronti da incollare in qualsiasi foglio di stile.
Riferimento CSS Border Radius
Abbreviato
border-radius: TL TR BR BL;
Da uno a quattro valori. Un singolo valore si applica a tutti gli angoli. Due valori: TL+BR / TR+BL. Tre: TL / TR+BL / BR. Quattro: ogni angolo.
Fantasia (Ellittica)
border-radius: H1 H2 H3 H4 / V1 V2 V3 V4;
Il separatore / separa i raggi orizzontali e verticali per ogni angolo, consentendo forme ellittiche e blob organici.
Proprietà Estese
border-top-left-radius: H V;
Ogni angolo ha la sua proprietà che accetta uno (uniforme) o due (ellittici) valori. Utile quando si sovrascrivono varianti di componenti.
Valori Percentuali
border-radius: 50%;
I valori percentuali sono relativi alla larghezza (H) e all'altezza (V) dell'elemento. 50% crea un cerchio o ellisse perfetto a seconda delle dimensioni dell'elemento.
Domande Frequenti
Qual è la sintassi border-radius / (slash)?
La barra separa i raggi orizzontali da quelli verticali. Ad esempio, border-radius: 50px / 25px rende ogni angolo largo 50 px e alto 25 px (un'ellisse). Puoi specificare valori diversi per ogni angolo: H1 H2 H3 H4 / V1 V2 V3 V4.
Come faccio a creare un cerchio perfetto?
Imposta tutti gli angoli a 50% - l'elemento deve anche avere larghezza e altezza uguali. Usa il preset di dimensione Avatar come esempio rapido.
Cos'è un CSS squircle?
Uno squircle (o superellisse) è una forma tra un quadrato e un cerchio. In CSS è approssimato con border-radius: 30% o valori ellittici specifici. Il generatore include un preset squircle.
Posso usare border-radius sulle immagini?
Sì - applicare border-radius a un elemento <img> ritaglia la sua area visibile. Abbinalo a overflow: hidden sul genitore per un ritaglio coerente tra i browser.
border-radius funziona su tutti gli elementi?
Sì. Funziona su elementi block e inline-block, immagini, input, pulsanti e la maggior parte degli altri elementi. Colpisce l'area dipinta e il confine dell'obiettivo di clic/tocco.
Quali unità dovrei usare?
Usa px per curve consistenti e indipendenti dalle dimensioni (buono per pulsanti). Usa % quando il raggio dovrebbe scalare con l'elemento (buono per cerchi). Usa rem per legare il raggio alla dimensione del carattere base.