Generatore di Raggio del Bordo CSS
border-radius sembra semplice finché non provi a spiegare perché 50% su un quadrato dà un cerchio, ma 50% su un rettangolo dà un ovale. Questo generatore ti permette di inserire un valore per ciascuno dei quattro angoli, di scegliere tra px, % e rem e di copiare l’esatta forma abbreviata che produce. Utile per forme di pulsanti, angoli di schede, pulsanti a pillola e angoli asimmetrici.
Come costruire un raggio del bordo
-
1
Imposta ogni angolo
Inserisci un raggio per gli angoli in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra.
-
2
Scegli l'unità
Pixel (dimensione fissa), percentuale (relativa all'elemento) o rem (relativa alla dimensione del font radice).
-
3
Genera il CSS
Premi Genera CSS per creare la forma abbreviata.
-
4
Copia la regola
Copia la forma abbreviata di `border-radius` e incollala nel tuo foglio di stile.
Ordine della notazione abbreviata
border-radius: top-left top-right bottom-right bottom-left;
Stesso come margine/padding: orario partendo dall’angolo in alto a sinistra. I valori omessi rispecchiano l’angolo opposto. Quindi border-radius: 10px 20px; significa 10px in alto a sinistra e in basso a destra, 20px in alto a destra e in basso a sinistra.
Cosa questo generatore non fa
Imposta un raggio per angolo, quindi non produce mai angoli ellittici (la forma a due valori con barra, come border-radius: 20px 10px / 5px 15px;) né proprietà estese come border-top-left-radius. Se ti servono, scrivi il CSS a mano.
Percentuale vs. pixel
| Unità | Comportamento |
|---|---|
| px | Fisso, non scala con la dimensione dell’elemento |
| % | Percentuale della larghezza dell’elemento (orizzontale) e altezza (verticale) |
| em | Scala con la dimensione del font dell’elemento |
| rem | Scala con la dimensione del font radice |
50% su un elemento quadrato = cerchio. Su un rettangolo 200x100, 50% = 100px raggio orizzontale + 50px verticale = ellisse.
Forme comuni
| Forma | CSS |
|---|---|
| Cerchio (quadrato) | border-radius: 50%; |
| Pillola | border-radius: 9999px; (qualsiasi valore >= metà altezza) |
| Scheda arrotondata | border-radius: 8px; o 12px |
| Bolla di chat | border-radius: 18px 18px 0 18px; (coda in basso a destra) |
| Sottile | border-radius: 2px; o 4px |
La regola “metà dell’altezza” per le pillole
Un pulsante a pillola è un rettangolo dove i cappucci orizzontali sono semicirconferenze perfette. Per ottenerlo in modo affidabile, imposta border-radius a almeno metà dell’altezza dell’elemento. Usare 9999px (o qualsiasi valore molto grande) è sicuro perché il browser limita il raggio alla geometria effettiva.
Interazione con overflow
border-radius taglia solo lo sfondo, il bordo e l’ombra della casella per impostazione predefinita. Per tagliare gli elementi figli (immagini, elementi annidati) alla forma arrotondata, aggiungi:
overflow: hidden;
o usa isolation: isolate + overflow: hidden per contenere anche i contesti di impilamento.
Nota di accessibilità
Non ci sono problemi di accessibilità con il border-radius stesso, ma un arrotondamento estremo su elementi interattivi (pillole, chip) non dovrebbe ridurre il target di tocco. Mantieni i pulsanti almeno 44x44 px (raccomandazione WCAG) indipendentemente dall’arrotondamento degli angoli.
Domande frequenti
Perché il border-radius percentuale è misurato come “% della larghezza” orizzontalmente e “% dell’altezza” verticalmente, su un elemento non quadrato questo produce un’ellisse. Per un cerchio, l’elemento deve essere quadrato, o usare valori in pixel che corrispondano alle dimensioni dell’elemento.
Solo lo sfondo, il bordo e l’ombra della casella per impostazione predefinita. Gli elementi figli non vengono tagliati a meno che tu non aggiunga anche overflow: hidden al genitore.
È animabile tra valori numerici: transition: border-radius 200ms; funziona per pixel e percentuale. L’animazione tra uno shorthand ellittico complesso e un raggio semplice può produrre fotogrammi intermedi sorprendenti; testa e semplifica gli stati di inizio/fine se appare strano.
La specifica non imposta un limite, ma i browser limitano il raggio effettivo a metà del lato più corto dell’elemento. Usare border-radius: 9999px su un pulsante alto 40px produce una pillola, il browser limita silenziosamente a 20px.
Strumenti correlati
Riferimento Tabella ASCII
Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Riferimento ai caratteri HTML
Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.
Riferimento scorciatoie da tastiera
Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.
Generatore di Palette di Colori
Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.
Semplificatore di Algebra Booleana
Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.