Generatore di border radius
Imposta ogni angolo e copia il CSS.
- Funziona nel tuo browser — il tuo testo non viene mai inviato da nessuna parte
- Nessuna registrazione, nessuna quota, gratis da usare quante volte vuoi
Come funziona
border-radius è semplice finché non vuoi tre angoli arrotondati e uno squadrato, e a quel punto tutti devono cercare l'ordine dei quattro valori.
L'ordine, una volta per tutte
In alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra: in senso orario partendo dall'alto a sinistra. Lo stesso ordine orario dall'alto a sinistra vale anche per le scorciatoie di margin, padding e border, e vale la pena memorizzarlo una volta per tutte.
Pixel o percentuale
I pixel danno la stessa curva qualunque sia la dimensione dell'elemento. Le percentuali sono relative alla larghezza e all'altezza dell'elemento stesso, quindi la curva si adatta in scala, e un raggio del 50% su un quadrato dà un cerchio perfetto, il trucco standard per gli avatar rotondi.
La forma a pillola
Un raggio maggiore di metà dell'altezza dell'elemento viene limitato esattamente alla metà, ed è per questo che border-radius: 999px produce in modo affidabile una pillola qualunque sia l'altezza. È più robusto che calcolare il valore giusto, perché continua a funzionare quando il contenuto cambia.
Quando gli angoli sembrano sbagliati negli elementi annidati
Un riquadro arrotondato dentro un altro riquadro arrotondato richiede un raggio più piccolo per quello interno, ridotto del padding tra i due, altrimenti le curve non saranno concentriche. È un piccolo dettaglio che fa sembrare le card fatte a regola d'arte.
Generatore di border radius: domande
In che ordine sono i quattro valori?
In alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra: in senso orario partendo dall'alto a sinistra.
Come si fa un cerchio perfetto?
border-radius: 50% su un elemento esattamente quadrato.
Come si fa un pulsante a pillola?
Usa un valore grande come 999px. I browser lo limitano a metà dell'altezza, quindi funziona a qualsiasi dimensione.
Devo usare pixel o percentuale?
Pixel per una curva costante; percentuale quando vuoi che si adatti in scala all'elemento.
Funziona ovunque?
Sì. border-radius è supportato senza prefisso da ben più di dieci anni.