Proprietà CSS border-radius

Definizione e utilizzo

La proprietà border-radius è una proprietà abbreviata che imposta le proprietà border-*-radius.

Suggerimento:Questa proprietà ti permette di aggiungere bordi arrotondati agli elementi!

Vedi anche:

Tutorial CSS3:Bordo CSS3

Esempio

Aggiungere bordi arrotondati al elemento div:

div
{
border:2px solid;
border-radius:25px;
}

Prova da solo

Più esempi sono disponibili nella parte inferiore della pagina.

Sintassi CSS

border-radius: 1-4 length|% / 1-4 length|%;

Nota:Impostare in questo ordine le quattro valori di ciascun radii. Se si omette bottom-left, sarà uguale a top-right. Se si omette bottom-right, sarà uguale a top-left. Se si omette top-right, sarà uguale a top-left.

Valore dell'attributo

Valore Descrizione Test
length Definire la forma degli angoli arrotondati. Test
% Definire la forma degli angoli arrotondati in percentuale. Test

Esempio 1

border-radius:2em;

ugualmente a:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Esempio 2

border-radius: 2em 1em 4em / 0.5em 3em;

ugualmente a:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Dettagli tecnici

Valore predefinito: 0
Inheritance: no
Versione: CSS3
Sintassi JavaScript: object.style.borderRadius="5px"

Supporto del browser

Le cifre nel tavolo indicano la versione del browser che supporta pienamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5