Generatore CSS Border-Radius

Regola visivamente gli angoli arrotondati con anteprima dal vivo e codice CSS da copiare.

Raggi verticali:

px
px 
{{ cssOutput }}

Cos'è border-radius?

La proprietà CSS border-radius arrotonda gli angoli di un elemento. Puoi impostare un raggio uniforme per tutti e quattro gli angoli o stilizzare ogni angolo individualmente. La notazione abbreviata segue l'ordine: alto-sinistra, alto-destra, basso-destra, basso-sinistra.

Raggi del bordo ellittici

Con la sintassi estesa border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 puoi definire un raggio orizzontale e verticale per ogni angolo. Questo crea curve ellittiche che producono forme più organiche.

Casi d'uso comuni

  • Cerchi: border-radius: 50% su un elemento quadrato.
  • Forma a pillola: border-radius: 9999px per pulsanti arrotondati.
  • Card: border-radius: 8px fino a 16px per design di card moderni.
  • Forme blob: Raggi orizzontali e verticali differenti per forme organiche.