Generatore di angoli arrotondati
Creare proprietà CSS border-radius
Input e opzioni
Preimpostazioni ed esempi rapidi
Funziona nel browser. I dati inseriti restano su questo dispositivo.
Risultati
Inserisca i valori per vedere il risultato.
Informazioni sul Generatore di angoli arrotondati
Il nostro generatore di CSS border radius gratuito offre un controllo visivo completo sugli angoli arrotondati di qualsiasi elemento HTML. Può regolare ogni angolo in modo indipendente oppure collegarli tutti, scegliere tra più unità (px, %, em, rem) e vedere subito il risultato nel pannello di anteprima dal vivo.
Gli angoli arrotondati sono parte fondamentale del web design moderno. Dai leggeri 4px di card e campi di input ai cerchi al 50% degli avatar, la proprietà border-radius determina come gli utenti percepiscono la sua interfaccia. Questo strumento rende semplicissimo trovare i valori esatti, senza tentativi alla cieca né continui aggiornamenti del browser.
Il generatore include 10 forme predefinite come Quadrato, Cerchio, Pillola, Goccia e Organica, oltre a un generatore casuale per esplorare soluzioni creative. L'output è disponibile in più formati, tra cui la sintassi abbreviata CSS, le proprietà dei singoli angoli, una classe CSS pronta all'uso e un equivalente approssimativo in Tailwind CSS.
Funzioni principali
- Controllo indipendente di ogni angolo: in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra
- Interruttore per collegare gli angoli e regolare in modo uniforme il raggio di tutti e quattro
- Quattro unità disponibili: pixel (px), percentuale (%), em e rem per i design responsive
- Anteprima in tempo reale con dimensione dell'elemento regolabile (100-300px) e selettore di colore personalizzato
- 10 forme predefinite: Quadrato, Arrotondato, Cerchio, Pillola, Alto arrotondato, Basso arrotondato, Sinistra arrotondata, Destra arrotondata, Goccia e Organica
- Indicatori visivi dei valori degli angoli che mostrano il raggio esatto di ciascun angolo
- Generatore casuale di raggi per ispirarsi e sperimentare
- Più formati di output CSS: sintassi abbreviata, proprietà singole, classe CSS e approssimazione in Tailwind CSS
- Copia negli appunti con un clic, per usare subito il risultato nei suoi progetti
- Cursori con indicazione dell'intervallo per regolare i valori in modo intuitivo
Come usare il Generatore di angoli arrotondati
- Selezioni l'unità: Scelga px per dimensioni fisse, % per un ridimensionamento responsive o em/rem per dimensioni basate sul testo.
- Regoli i valori degli angoli: Usi i cursori per impostare il raggio di ogni angolo singolarmente, oppure attivi «Collega tutti gli angoli» per un arrotondamento uniforme.
- Provi le forme predefinite: Faccia clic su una delle 10 forme predefinite, come Cerchio, Pillola o Goccia, per applicare subito le configurazioni più comuni.
- Guardi l'anteprima: Consulti l'anteprima dal vivo con dimensione e colore regolabili per vedere esattamente come apparirà il suo border radius.
- Copi il CSS: Faccia clic su Copia per prendere il codice CSS di border-radius, oppure usi la sezione dei formati alternativi per le proprietà singole o le classi Tailwind.
Casi d'uso
- Stile dei pulsanti: Crei pulsanti a pillola, pulsanti di invito all'azione appena arrotondati o pulsanti icona completamente circolari.
- Componenti card: Applichi angoli arrotondati coerenti a card, finestre modali e riquadri di dialogo nel suo design system.
- Immagini avatar: Usi un border-radius del 50% su immagini quadrate per ottenere avatar utente e foto profilo perfettamente circolari.
- Campi di input: Aggiunga un leggero arrotondamento a input, textarea e menu a discesa dei moduli per un aspetto moderno.
- Elementi di navigazione: Dia stile a schede, badge, tag e voci di navigazione con un arrotondamento adeguato.
- Forme creative: Combini valori asimmetrici degli angoli per creare macchie organiche, gocce ed elementi decorativi unici.
- Design di tooltip e popover: Applichi un arrotondamento preciso a tooltip, popover e menu a discesa.
- Token di design responsive: Definisca valori di border-radius coerenti in tutto il progetto usando le unità em o rem.
Domande frequenti
Questo strumento è gratuito?
Sì, il Generatore di angoli arrotondati è completamente gratuito e senza restrizioni. Può usarlo quante volte vuole, senza registrazione né pagamento.
I miei dati sono al sicuro?
Assolutamente sì. Lo strumento funziona interamente nel browser. Nessun dato viene trasmesso a un server, quindi le impostazioni e il codice CSS generato restano privati sul suo dispositivo.
Qual è la differenza tra px e % per border-radius?
I valori in pixel (px) creano un raggio fisso, indipendente dalla dimensione dell'elemento. I valori in percentuale (%) sono relativi alle dimensioni dell'elemento e quindi risultano responsive. Ad esempio, il 50% su un elemento quadrato crea un cerchio perfetto.
Come si crea un cerchio perfetto con il CSS?
Imposti border-radius al 50% su un elemento con larghezza e altezza uguali. La forma predefinita Cerchio di questo strumento applica esattamente questa configurazione.
Border-radius è supportato da tutti i browser?
Sì, la proprietà CSS border-radius è supportata pienamente da tutti i browser moderni, tra cui Chrome, Firefox, Safari, Edge e Opera. Non servono prefissi del produttore.
Consigli e buone pratiche
- Usi valori coerenti: Definisca 2-3 valori standard di border-radius nel suo design system (ad es. 4px, 8px, 16px) per mantenere coerenza visiva.
- Usi le percentuali per i cerchi: Imposti il 50% sugli elementi quadrati per ottenere cerchi perfetti che si adattano automaticamente al variare delle dimensioni.
- Resti discreto con i moduli: I valori piccoli (2-8px) funzionano meglio per campi di input ed elementi dei moduli, per un aspetto pulito e professionale.
- Provi angoli asimmetrici: Valori diversi su ogni angolo creano forme uniche che possono dare carattere agli elementi decorativi.
- Valuti le unità responsive: Usi em o rem per valori di border-radius che scalano in proporzione al testo.
- Verifichi con il contenuto: Controlli sempre l'aspetto degli angoli arrotondati con il contenuto reale all'interno dell'elemento, soprattutto a diverse dimensioni del viewport.