Cos'è CSS border-radius?

CSS border-radius arrotonda gli angoli del box border di un elemento. Accetta da uno a quattro valori che specificano il raggio di ogni angolo. Puoi creare cerchi, ellissi, pill e curve organiche complesse.

Differenza tra la shorthand border-radius e le proprietà individuali per angolo?

La shorthand accetta 1-4 valori che mappano gli angoli in senso orario. Le proprietà individuali (border-top-left-radius, ecc.) permettono due valori per angoli ellittici asimmetrici.

Come creo un cerchio perfetto con border-radius?

Imposta border-radius al 50% su un elemento quadrato. Poiché i valori percentuali sono relativi alle dimensioni, 50% in ogni direzione crea un'ellisse — un cerchio perfetto quando larghezza uguale altezza.

Cosa sono i valori ellittici di border-radius?

border-radius può accettare due valori per angolo separati da una barra, definendo raggio orizzontale e verticale indipendentemente: `border-radius: 50px / 25px`.

border-radius influisce sull'area cliccabile o sull'overflow?

border-radius arrotonda solo l'aspetto visivo. Per ritagliare il contenuto agli angoli aggiungi overflow: hidden. L'area cliccabile rimane rettangolare.

Come uso border-radius in un design system?

I design system definiscono token di raggio: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px). Applicali coerentemente tra i componenti.

border-radius è supportato in tutti i browser?

border-radius è supportato in tutti i browser moderni da IE9. Non servono prefissi vendor.

Border Radius
Generator

Genera valori CSS border-radius con anteprima live. Controlla ogni angolo indipendentemente o bloccali insieme per un arrotondamento uniforme.

Tutti i 4 angoliBlocca / sbloccaCSS-ready

① Trascina i cursori per il radius ② Blocca angoli per uniformità ③ Copia il CSS

Preset

In alto a sinistra: 20px

In alto a destra: 20px

In basso a sinistra: 20px

In basso a destra: 20px

CSS generato

border-radius: 20px;

Angoli individuali

CSS border-radius accetta fino a 4 valori per controllare ogni angolo indipendentemente: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra (in senso orario).

Shorthand

Quando tutti gli angoli sono uguali, viene emesso un singolo valore. CSS supporta anche raggi ellittici usando la sintassi "/" per forme organiche.

Unità

Border-radius accetta px (assoluto), % (relativo alla dimensione dell'elemento) e altre unità di lunghezza. 50% su un quadrato crea un cerchio perfetto.

CSS border-radius — angoli, forme e supporto browser

La proprietà CSS border-radius arrotonda gli angoli del box di bordo di un elemento. Accetta fino a quattro valori in senso orario usando px, %, em o rem. border-radius: 50% su un quadrato crea un cerchio perfetto; border-radius: 9999px crea una forma pill. La sintassi slash (border-radius: 50px / 25px) definisce angoli ellittici. Per ritagliare immagini agli angoli aggiungere overflow: hidden. Supportato in tutti i browser moderni senza prefissi vendor da CSS3. In Figma, incolla i valori direttamente nei campi corner radius.

Domande frequenti

La proprietà CSS border-radius arrotonda gli angoli del box di bordo di un elemento. Accetta 1–4 valori di lunghezza (px, %, em) per ciascun angolo in senso orario: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.

1 valore: tutti gli angoli uguali. 2 valori: TL/BR e TR/BL. 3 valori: TL, TR/BL, BR. 4 valori: TL, TR, BR, BL (in senso orario). Quando tutti e quattro sono uguali, il generatore emette un singolo valore.

I valori in pixel danno dimensioni assolute degli angoli indipendentemente dalle dimensioni dell'elemento. I valori percentuali sono relativi alle dimensioni dell'elemento: 50% crea un cerchio se l'elemento è quadrato.

Imposta border-radius: 50% su un elemento quadrato (larghezza e altezza uguali). Per elementi rettangolari, usa border-radius: 50% / 50% che crea un'ellisse.

Border-radius ha un impatto minimo sulle prestazioni negli elementi statici. L'animazione di border-radius può provocare repaint. Usare border-radius con transform sul layer GPU è più performante.

In Figma, border-radius si imposta per angolo nel pannello design. In Sketch, usa i manici del raggio degli angoli. Entrambi supportano raggi misti come questo generatore.

Border-radius funziona sulla maggior parte degli elementi HTML inclusi div, button, img, input e table. Su img richiede overflow: hidden per ritagliare l'immagine.

CSS border-radius — angoli, forme e supporto browser

Domande frequenti

Esplora il Nostro Network