Punti salienti
- 01Tre modalità — uniforme, per angolo ed ellittica — coprono tutto dai semplici pulsanti arrotondati alle forme blob organiche.
- 02Supporta unità px, %, e rem, ognuna con comportamenti di ridimensionamento diversi.
- 03La modalità ellittica espone i raggi orizzontali e verticali per angolo per la sintassi completa border-radius di CSS.
- 04L'anteprima live utilizza la vera proprietà CSS, quindi quello che vedi è esattamente quello che il tuo browser renderizzerà.
Dagli angoli arrotondati semplici alle forme blob organiche
Un valore border-radius a quattro angoli è abbastanza facile da digitare a memoria — border-radius: 8px. Ma una volta che hai bisogno di raggi diversi per angolo, o vuoi la sintassi ellittica CSS per forme organiche, la scorciatoia diventa criptica rapidamente. La forma completa è top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — otto valori in un ordine specifico.
Il generatore border-radius di Handytool ti permette di trascinare i cursori per ogni angolo in qualsiasi modalità e vedere la forma aggiornarsi live. Passa tra px, %, e rem senza ricalcolare, e copia la scorciatoia corretta o la dichiarazione CSS in forma lunga quando hai finito.
Come progettare un border-radius
- 01
Scegli una modalità
La modalità uniforme applica un raggio a tutti e quattro gli angoli. La modalità per-angolo controlla ogni angolo indipendentemente. La modalità ellittica aggiunge un raggio orizzontale e verticale separato per angolo.
- 02
Scegli un'unità
Scegli px per dimensioni assolute, % per valori che si ridimensionano con le dimensioni dell'elemento, o rem per dimensioni legate alla dimensione del carattere radice.
- 03
Trascina i cursori
Regola i valori del raggio e guarda l'elemento di anteprima aggiornarsi live. Per la modalità per-angolo, trascina il cursore di ogni angolo indipendentemente.
- 04
Visualizza l'anteprima della forma
La casella di anteprima applica la vera proprietà CSS border-radius, quindi la forma che vedi è la forma che il tuo browser renderizzerà.
- 05
Copia il CSS
Fai clic su Copia per ottenere la dichiarazione border-radius e incollala nel tuo foglio di stile.
Forme comuni e quando usare ogni modalità
- 01Pulsante pillola: modalità % uniforme, impostato al 50% — sempre una pillola completa indipendentemente dalla larghezza del pulsante
- 02Scheda con arrotondamento sottile: modalità px uniforme, 8–16px — il pattern UI più comune
- 03Tag o etichetta asimmetrica: modalità per-angolo, affilato da un lato, arrotondato dall'altro
- 04Cerchio avatar: modalità % uniforme, 50% — si ridimensiona con il contenitore dell'immagine
- 05Forma blob organica: modalità ellittica con valori X/Y diversi per angolo
Anteprima istantanea, nulla caricato
Il generatore border-radius è interamente lato client. I cursori, i cambi di modalità e i cambi di unità aggiornano tutti l'anteprima immediatamente senza roundtrip del server. Non c'è account e nessun limite di velocità.
Lo strumento funziona su tutti i browser moderni. La proprietà border-radius — inclusa la sintassi ellittica X/Y — è supportata in ogni versione evergreen di Safari, Firefox, Edge e Chrome, quindi l'output è sicuro da usare senza prefissi vendor o fallback.
FAQ del generatore border-radius
Qual è la differenza tra px e % per border-radius?
I raggi in pixel sono assoluti — 16px è sempre 16px. I raggi percentuali sono relativi alle dimensioni dell'elemento, quindi il 50% crea un cerchio perfetto su una scatola quadrata e un'ellisse su un rettangolo.
Quando dovrei usare la modalità ellittica?
Usa la modalità ellittica quando vuoi un angolo che sporge più su un asse — per una pillola orizzontale, una forma di foglia o un blob organico. CSS lo esprime come raggi-X / raggi-Y nella scorciatoia border-radius.
Perché il mio raggio percentuale sembra sbagliato su una scatola non quadrata?
Le percentuali orizzontali sono relative alla larghezza dell'elemento; le percentuali verticali all'altezza. Su un elemento largo e basso gli angoli si allungano in ellissi piuttosto che in archi circolari.
L'output funziona in ogni browser?
Sì — border-radius inclusa la sintassi ellittica è supportata in ogni browser moderno: tutte le versioni evergreen di Safari, Firefox, Edge e Chrome. Nessun prefisso vendor necessario.
Come creo un cerchio perfetto con border-radius?
Imposta tutti gli angoli al 50% in modalità percentuale su un elemento quadrato. L'elemento ha anche bisogno di larghezza e altezza uguali — usa aspect-ratio: 1 / 1 se la dimensione è dinamica.