In questo articolo
Comprendere border-radius
La proprietà CSS border-radius arrotonda gli angoli del bordo esterno di un elemento. Accetta da uno a quattro valori per controllare ogni angolo indipendentemente — alto-sinistra, alto-destra, basso-destra e basso-sinistra. Un singolo valore applica lo stesso raggio a tutti e quattro gli angoli, mentre quattro valori permettono di creare forme asimmetriche.
Border-radius funziona con qualsiasi elemento che abbia bordi, sfondi o ombre visibili. Ritaglia sia lo sfondo che il bordo nella forma arrotondata e interagisce correttamente con box-shadow, outline e overflow.
Creare forme con border-radius
Variando i valori del raggio, puoi creare un'ampia gamma di forme geometriche interamente con CSS. Il generatore ti permette di regolare visivamente ogni angolo e vedere immediatamente il risultato.
- Forma pillola — imposta border-radius a 9999px per creare estremità completamente arrotondate come un pulsante capsula. È il pattern UI più comune per tag, badge e pulsanti pillola
- Cerchio — applica border-radius: 50% a un elemento quadrato (larghezza e altezza uguali). La percentuale è calcolata rispetto a ogni dimensione, creando un cerchio perfetto
- Forme foglia e blob — imposta due angoli opposti a valori alti e gli altri due a zero (es. border-radius: 60% 0 60% 0) per creare forme organiche
Prova gratuitamente — nessuna registrazione richiesta
Genera CSS Border Radius →Angoli ellittici avanzati
La shorthand border-radius supporta una sintassi con barra (/) che permette di definire raggi orizzontali e verticali separati per ogni angolo. Questo crea curve ellittiche invece di circolari.
- Sintassi con barra — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% significa che i raggi orizzontali sono tutti 50%, ma quelli verticali differiscono, creando una forma a uovo
- Proprietà angoli individuali — border-top-left-radius: 50px 30px imposta un angolo ellittico con 50px di raggio orizzontale e 30px di raggio verticale
- Comportamento percentuali — con le percentuali, il raggio orizzontale è relativo alla larghezza e quello verticale all'altezza. Quindi 50% / 50% su un rettangolo crea un'ellisse, non un cerchio
Domande frequenti
Devo usare percentuali o pixel per border-radius?
Usa percentuali quando vuoi che il raggio si adatti alla dimensione dell'elemento (cerchi, ellissi). Usa pixel per arrotondamento costante (pulsanti, card). Un pattern comune è 8px per componenti UI e 50% per avatar.
Border-radius causa problemi di rendering subpixel?
Su display ad alta risoluzione, piccoli valori di border-radius (1-2px) possono apparire frastagliati. Usare un raggio leggermente più grande (minimo 3-4px) può migliorare la qualità di rendering.
Come interagisce border-radius con bordi e outline?
Border-radius arrotonda il bordo esterno del border. Se l'elemento ha un bordo spesso, il raggio interno viene calcolato come raggio-esterno meno larghezza-bordo. Gli outline non seguono border-radius nella maggior parte dei browser. Box-shadow segue la forma arrotondata.