toolsmoah

Generatore di raggio del bordo

Crea e visualizza in anteprima le proprietà CSS border-radius.

CSS generato
Regola l'arrotondamento di ogni angolo
Anteprima
Anteprima dell'effetto border-radius generato
Anteprima
CSS generato
border-radius: 20px;
Esempi
Fai clic sugli stili border-radius predefiniti per applicarli
Proprietà del raggio del bordo

Ordine delle proprietà

La proprietà border-radius si applica in senso orario: in alto a sinistra → in alto a destra → in basso a destra → in basso a sinistra

Proprietà abbreviate

  • • border-radius: 10px; - Si applica a tutti e quattro gli angoli
  • • border-radius: 10px 20px; - Il primo si applica in alto a sinistra e in basso a destra, il secondo in alto a destra e in basso a sinistra
  • • border-radius: 10px 20px 30px; - Il primo si applica in alto a sinistra, il secondo in alto a destra e in basso a sinistra, il terzo in basso a destra
  • • border-radius: 10px 20px 30px 40px; - Si applica in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra in ordine

Consigli per l'uso

  • • Usa il 50% per creare un cerchio perfetto
  • • 4-8px è tipicamente buono per i pulsanti
  • • 8-16px è comune per schede e pannelli
  • • Il raggio asimmetrico può creare effetti di design unici
    Generatore di raggio del bordo | toolsmoah