Generatore di border-radius CSS
Imposta l’arrotondamento di tutti gli angoli insieme o di ciascuno separatamente, in pixel o percentuale, e volendo in modo ellittico con raggio orizzontale e verticale distinti. Il generatore scrive il valore nella forma valida più breve, elenca le quattro proprietà estese e calcola i raggi che il browser usa davvero per le dimensioni del tuo box.
Come si calcola
Come il browser legge border-radius
La forma breve accetta da uno a quattro valori nell’ordine alto sinistra, alto destra, basso destra, basso sinistra – in senso orario. I valori mancanti si completano come per margin:
| Valore | Significato |
|---|---|
12px | tutti e quattro gli angoli a 12 px |
24px 8px | alto sinistra e basso destra 24 px, alto destra e basso sinistra 8 px |
24px 8px 4px | alto sinistra 24 px, alto destra e basso sinistra 8 px, basso destra 4 px |
40px 10px / 20px 5px | ellittico: raggi orizzontali prima della barra, verticali dopo |
Il generatore riduce ogni valore inserito alla forma equivalente più breve: 10px 10px 10px 10px diventa 10px, e una barra seguita da valori identici viene eliminata.
Percentuali: larghezza e altezza separate
Le percentuali si riferiscono alla larghezza del box in orizzontale e alla sua altezza in verticale. 50% trasforma quindi un quadrato in un cerchio, ma un rettangolo di 240 × 160 px in un’ellisse con raggi di 120 px e 80 px. Per un angolo circolare su un rettangolo, usa i pixel.
Quando le curve si sovrappongono
Se due raggi adiacenti superano insieme la lunghezza del lato che condividono, la specifica W3C impone al browser di ridurre tutti i raggi dello stesso fattore f = min(lunghezza del lato ÷ somma dei due raggi su quel lato).
Esempio “forma a pillola” border-radius: 9999px su un pulsante di 200 × 40 px: a sinistra e a destra la somma è 9999 + 9999 = 19.998 px contro un’altezza di 40 px, quindi f = 40 ÷ 19.998 ≈ 0,002. Ogni angolo riceve 9999 × f = 20 px – esattamente metà dell’altezza, così le estremità sono semicerchi perfetti. “Raggi usati” mostra questi valori per il tuo box.
Domande frequenti
Come faccio un cerchio con il CSS?
Applica border-radius: 50% a un elemento quadrato. Su un rettangolo, 50% produce un’ellisse; per estremità arrotondate (forma a pillola), usa un valore in pixel molto grande come 9999px.
Cosa significa la barra in border-radius?
Separa i raggi orizzontali da quelli verticali. 40px / 20px arrotonda ogni angolo come un quarto di ellisse, largo 40 px e alto 20 px. Con fino a quattro valori per lato, in totale sono otto valori.
Perché l’arrotondamento è più piccolo di quello impostato?
Perché le curve si sovrapporrebbero. Il browser riduce allora tutti i raggi nella stessa proporzione, anche gli angoli che da soli sarebbero entrati. Il generatore mostra il fattore e i raggi effettivamente usati.
In che ordine vanno i quattro valori?
Alto sinistra, alto destra, basso destra, basso sinistra – in senso orario a partire dall’alto sinistra. Le proprietà estese sono border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius.
Fonti e riferimenti normativi
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Aggiornato al:
Strumenti correlati
- Generatore di box-shadow CSSCrea ombre CSS con i cursori: livelli, spostamento, sfocatura, estensione, colore trasparente, inset e modelli – anteprima dal vivo, CSS pronto da copiare.
- Generatore di gradienti CSSCrea gradienti CSS lineari, radiali o conici con tutti i punti colore che vuoi, angolo e colore di riserva: anteprima dal vivo e codice CSS pronto da copiare.
- Convertitore di colori: HEX, RGB, HSL, HSV, CMYKConverti i colori: da HEX a RGB, da RGB a HEX, HSL, HSV, HWB e CMYK. Digita in qualsiasi formato o usa il selettore e copia il risultato, nel browser.
- Abbinare i font – coppie per titoli e testoCoppie di font per titoli e testo con anteprima live, CSS pronto da copiare e disponibilità su Windows, Mac, iPhone e Android – solo font di sistema.
- Verifica e calcolo della cifra di controllo di LuhnVerifica un numero con l’algoritmo di Luhn (modulo 10, ISO/IEC 7812-1) o calcola la cifra di controllo – solo controllo di formato, in locale nel browser.
- Codifica e decodifica Base64Codifica e decodifica Base64 e Base64url con UTF-8 corretto, più URL encode/decode (percent-encoding). Errori chiari, tutto in locale nel tuo browser.