Generatore CSS Border Radius

Capire la shorthand border-radius

La proprietà CSS border-radius è definita nel W3C CSS Backgrounds and Borders Module Level 3. La sua shorthand accetta fino a quattro valori per angoli circolari e fino a otto (separati da una barra) per angoli ellittici. L'ordine degli angoli è fisso: top-left, top-right, bottom-right, bottom-left, in senso orario partendo da top-left, esattamente come si legge il quadrante di un orologio. La specifica è inequivocabile: «Se bottom-left è omesso, è uguale a top-right. Se bottom-right è omesso, è uguale a top-left. Se top-right è omesso, è uguale a top-left.»

Le quattro longhand per angolo permettono di definire un singolo angolo senza scrivere gli altri: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Ognuna accetta un valore (angolo circolare) o due valori (angolo ellittico x y).

Pixel, percentuali e il trucco del 50%

La specifica W3C definisce come si risolvono le percentuali: «Le percentuali per il raggio orizzontale si riferiscono alla larghezza del border box, mentre le percentuali per il raggio verticale si riferiscono all'altezza del border box.» Questo produce una conseguenza importante: border-radius: 50% crea un cerchio perfetto solo quando l'elemento è quadrato. Su un rettangolo 200×100, il 50% su ogni angolo produce un'ellisse: raggio orizzontale di 100px (metà della larghezza) e raggio verticale di 50px (metà dell'altezza).

Quando usare quale unità:

• Pixel (px): Angoli precisi e fissi che non si scalano con l'elemento. Ideali per pulsanti, card e componenti UI coerenti.
• Percentuali (%): Si scalano con l'elemento. Usare il 50% per cerchi o ellissi su componenti dalle dimensioni variabili.
• em / rem: Si scalano con la dimensione del carattere. Utili per pulsanti il cui raggio d'angolo dovrebbe crescere con il testo al loro interno.
• calc(): Mescola unità, es. calc(8px + 0.5em) per una base che scala leggermente con la dimensione del testo.

Il trucco della pill

Impostare un border-radius più grande della metà del lato più corto dell'elemento blocca ogni angolo a un vero semicerchio, producendo una forma pill indipendentemente dalla larghezza. La convenzione è border-radius: 9999px, un numero abbastanza grande da non essere mai superato da nessun elemento realistico. Ecco perché il .rounded-pill di Bootstrap usa 50rem (~800px) e il rounded-full di Tailwind v4 si risolve in calc(infinity * 1px): entrambi codificano la stessa idea, che un numero più grande del box garantisce una pill su qualsiasi elemento.

Angoli ellittici e forme blob organiche

La forma a otto valori (con barra) è quella che i designer usano per creare forme «blob» organiche e asimmetriche diventate popolari per illustrazioni hero e sfondi decorativi. Ogni angolo riceve un raggio orizzontale diverso prima della barra e un raggio verticale diverso dopo, producendo curve non vincolate ad archi circolari.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Varianti a proprietà logiche per layout RTL

Il CSS Logical Properties Module Level 1 introduce quattro longhand logiche che si adattano alla direzione di scrittura:

• border-start-start-radius: top-left nell'inglese LTR, top-right nell'arabo/ebraico RTL.
• border-start-end-radius: top-right in LTR, top-left in RTL.
• border-end-start-radius: bottom-left in LTR, bottom-right in RTL.
• border-end-end-radius: bottom-right in LTR, bottom-left in RTL.

Utile quando lo stesso componente deve apparire simmetrico in entrambe le direzioni di lettura: l'angolo «bocca» di una bolla di chat, ad esempio, dovrebbe essere sempre dalla parte del mittente, non sempre a sinistra. Si noti che non esiste ancora una shorthand a proprietà logiche, quindi è necessario scrivere tutte e quattro le longhand separatamente per avere angoli consapevoli della direzione RTL.

Bordo esterno vs bordo interno quando il bordo è spesso

Il raggio si applica al lato esterno del bordo. Il browser calcola automaticamente un raggio più piccolo e concentrico per il lato interno in modo che il bordo non appaia discontinuo nell'angolo. Conseguenza pratica: un raggio esterno di 16px con un bordo di 2px avrà un raggio interno di circa 14px, in modo che il bordo sembri una cornice di spessore costante tutto intorno. Impostare background-clip: padding-box se si vuole che il colore di sfondo si fermi al lato interno del bordo invece di scorrere sotto di esso.

Convenzioni pratiche di dimensionamento

Errori comuni

1. Usare il 50% su un elemento non quadrato aspettandosi un cerchio. Il 50% su un rettangolo è un'ellisse. O si mantiene l'elemento quadrato, oppure si usa border-radius: 9999px per una vera pill.
2. Dimenticare l'ordine degli angoli. La shorthand è in senso orario da top-left (TL TR BR BL). La forma a due valori imposta coppie diagonalmente opposte, che è facile dimenticare.
3. Valori negativi. La specifica li definisce come non validi; il browser li forza silenziosamente a zero. Se un angolo non si arrotonda come ci si aspetta, verificare di non aver sottratto accidentalmente.
4. Genitori arrotondati che traboccano nei figli. Un elemento con border-radius non ritaglia i suoi discendenti per impostazione predefinita. Aggiungere overflow: hidden al genitore se si vuole che i figli si fermino al bordo arrotondato.
5. Proprietà per angolo prima della shorthand. La cascade CSS è sensibile all'ordine, quindi border-top-left-radius seguito da border-radius sovrascrive il valore per angolo. Mettere prima la shorthand, poi gli override per angolo.
6. Mescolare % e px in modo imbarazzante. Impostare un raggio del 50% su un angolo e 12px su un altro raramente produce il risultato che i designer si aspettano. Rimanere in un'unica unità per elemento.
7. Tabelle e border-collapse: collapse. Il riferimento MDN è esplicito: border-radius non si applica agli elementi table o inline-table quando i bordi sono collassati. Passare a border-collapse: separate o applicare il raggio a un elemento wrapper.

Altre domande frequenti

Perché la mia immagine non ha gli angoli arrotondati?

Se l'immagine è all'interno di un contenitore con border-radius ma gli angoli sembrano ancora quadrati, il genitore non sta ritagliando. Aggiungere overflow: hidden al genitore. In alternativa, applicare border-radius direttamente all'elemento <img>; le immagini rispondono nativamente alla proprietà.

border-radius influisce sulle prestazioni?

In modo trascurabile. I browser moderni renderizzano gli angoli arrotondati sulla GPU e il costo è essenzialmente identico a un bordo quadrato. L'eccezione è l'animazione di border-radius su un elemento grande ogni frame (può attivare la ricomposizione dei layer), ma gli angoli arrotondati statici sono praticamente gratuiti.

Funzionerà nei browser più vecchi?

Sì. Ogni browser dal IE9 in poi supporta border-radius senza prefisso. Le varianti a proprietà logiche (border-start-start-radius ecc.) sono più recenti: Chrome 89+, Firefox 66+, Safari 15+. Per i browser più vecchi che necessitano di comportamento logico, scrivere un piccolo blocco @supports come fallback.

Come si crea una bolla di chat?

Usare le quattro longhand per angolo per arrotondare tre angoli e lasciare il quarto piccolo o spigoloso. È la «bocca» che punta verso il mittente. Ad esempio, una bolla di messaggio in uscita: border-radius: 16px 16px 4px 16px;. Per le bolle consapevoli dell'RTL, passare alle longhand logiche in modo che la bocca si capovolga con la direzione di lettura.

Perché i miei pulsanti pill appaiono irregolari su larghezze di elementi diverse?

Una pill blocca ogni angolo a metà del lato più corto, che per un pulsante tipico è l'altezza. Quindi i pulsanti più corti ottengono raggi più piccoli e quelli più alti raggi più grandi. Questo è il comportamento desiderato. Se si vuole un raggio costante su ogni pulsante indipendentemente dalla dimensione, usare un valore in pixel fisso (es. border-radius: 24px) invece del trucco della pill.

Posso copiare il CSS direttamente nei progetti Tailwind / Bootstrap?

Sì, il CSS generato è sintassi standard semplice senza dipendenze da preprocessori o framework. In Tailwind v4 è possibile scrivere anche valori arbitrari come utilità (rounded-[12px] o rounded-[30%/70%]) se si preferisce rimanere nello stile delle classi di utilità.