Generatore di angoli arrotondati e forme
Regola i raggi orizzontali e verticali dei quattro angoli in px o % e visualizza l'anteprima della forma. Puoi copiare o salvare il CSS border-radius generato. Larghezza, altezza e colore dell'anteprima non sono inclusi nel CSS.
Cosa puoi fare
Regola l'arrotondamento da un preset
Scegli tra 8 preset, tra cui angoli arrotondati, capsula e foglia, e regola i raggi. Selezionando un preset vengono sostituiti i raggi e l'unità.
Imposta arrotondamenti diversi per i quattro angoli
Disattiva l'impostazione del raggio uniforme per inserire separatamente i raggi orizzontali e verticali degli angoli superiore sinistro, superiore destro, inferiore destro e inferiore sinistro.
Controlla e ottieni il CSS
Dopo aver controllato la forma, genera il CSS. Passa dalla dichiarazione abbreviata alle dichiarazioni per singolo angolo, quindi copialo o salvalo come file CSS.
Come usarlo
Scegli un preset e un'unità
Inserisci direttamente i raggi oppure scegli un preset da modificare. Cambiare unità non converte i numeri.
Confronta arrotondamenti e forma
Inserisci un valore per usare lo stesso raggio. Per variarlo per angolo, deseleziona l'opzione e modifica i valori orizzontali e verticali.
Se serve, controlla le dimensioni
Nelle impostazioni dell'anteprima puoi modificare larghezza, altezza e colore dell'anteprima. Questi valori non sono inclusi nel CSS di output.
Genera CSS, poi copialo o salvalo
Premi “Genera CSS” e scegli il formato desiderato. Se modifichi i raggi, l'unità o le dimensioni, genera di nuovo il CSS.
Utile quando
Definisci la forma degli angoli di schede e pulsanti
Quando vuoi creare CSS per componenti di pagina con tutti e quattro gli angoli arrotondati allo stesso modo o solo quelli superiori.
Crea uno sfondo arrotondato asimmetrico
Quando vuoi variare l'arrotondamento orizzontale e verticale per angolo per creare contorni simili a foglie o forme organiche.
Relazione tra raggi, unità e dimensioni di visualizzazione
Orizzontale e verticale sono le due direzioni dello stesso angolo
Il raggio orizzontale controlla l'arrotondamento orizzontale e quello verticale l'arrotondamento verticale. Un angolo non è arrotondato se uno dei due valori è 0. Specifica i quattro angoli in senso orario partendo da quello in alto a sinistra.
% usa larghezza e altezza come riferimenti distinti
I valori orizzontali in % si riferiscono alla larghezza dell'elemento e quelli verticali alla sua altezza. Anche con gli stessi numeri, un quadrato e un rettangolo alto o largo appaiono diversi. px indica direttamente una lunghezza.
I raggi troppo grandi si riducono in proporzione uguale
Se la somma dei raggi adiacenti supera la lunghezza del lato, tutti e 8 i raggi visualizzati vengono ridotti dello stesso fattore. I valori inseriti e il CSS generato restano invariati. Nei dettagli dopo la generazione puoi controllare i raggi usati per l'anteprima.
Forme ottenibili con gli angoli arrotondati
border-radius crea curve ellittiche agli angoli. Non può creare rientranze o poligoni arbitrari. Il preset squircle approssima la forma con angoli ellittici, senza riprodurre la curva matematica esatta.
Domande frequenti
Posso impostare arrotondamenti diversi per ogni angolo?
Sì. Deseleziona “Usa lo stesso raggio per tutti gli angoli” per inserire separatamente i raggi orizzontali e verticali di ogni angolo. Se la riselezioni, tutti i raggi vengono impostati sul raggio orizzontale in alto a sinistra.
I numeri vengono convertiti quando cambio unità?
No. I numeri vengono mantenuti e cambia solo l'unità. Se dopo il passaggio da px a % un valore supera 100, inseriscilo di nuovo nell'intervallo da 0 a 100.
Le dimensioni e il colore dell'anteprima sono inclusi nel CSS?
No. L'output contiene solo le dichiarazioni border-radius. Imposta larghezza, altezza e colore di sfondo nella pagina o nel componente in cui lo usi.
Perché la forma visualizzata ha angoli meno arrotondati dei raggi inseriti?
Il browser riduce i raggi visualizzati in proporzione uguale per evitare la sovrapposizione delle curve degli angoli. In “Raggi usati per la visualizzazione” puoi controllare il fattore di riduzione e i valori in px per ogni angolo.
Input e risultati
- Raggi
- Specifica tutti e 8 i valori nella stessa unità: da 0 a 100% oppure da 0 a 9999px. Sono accettati anche valori decimali.
- Anteprima
- Larghezza e altezza dell'anteprima sono numeri interi da 1 a 400px. Una larghezza che non entra può essere scorsa orizzontalmente nel campo.
- Output
- Dichiarazione abbreviata border-radius oppure dichiarazioni per ciascuno dei 4 angoli. Copia o salva border-radius.css.
- Non inclusi
- Larghezza, altezza, colore di sfondo ed esportazioni di immagini o SVG.