Proprietà border-radius

La proprietà border-radius crea angoli arrotondati per il bordo e lo sfondo. I valori della proprietà sono qualsiasi unità di misura. Valore predefinito: 0. È una proprietà abbreviata per border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintassi

selettore {
	border-radius: valore;
}

Numero di valori

La proprietà può accettare 1, 2, 3 o 4 valori, specificati separati da spazi:

Numero	Descrizione
`1`	Per tutti gli angoli contemporaneamente.
`2`	Il primo valore imposta l'arrotondamento per l'angolo in alto a destra e in basso a sinistra, il secondo - per l'angolo in alto a sinistra e in basso a destra.
`3`	Il primo valore imposta l'arrotondamento per l'angolo in alto a sinistra, il secondo - contemporaneamente per l'angolo in alto a destra e in basso a sinistra, e il terzo - per l'angolo in basso a destra.
`4`	Il primo valore imposta l'arrotondamento per l'angolo in alto a sinistra, il secondo - per l'angolo in alto a destra, il terzo - per l'angolo in basso a destra, e il quarto - per l'angolo in basso a sinistra.

Arrotondamento ellittico

Due valori separati da una barra impostano un arrotondamento ellittico. Il valore prima della barra indica l'arrotondamento orizzontale, mentre i valori dopo la barra - quello verticale:

selettore {
	border-radius: orizzontale / verticale;
}

Se vengono specificati arrotondamenti per più angoli, allora prima della barra vengono elencati tutti gli arrotondamenti orizzontali, e dopo di essa - tutti quelli verticali.

Esempio

Impostiamo un arrotondamento di 10px per tutti gli angoli:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Esempio

Vediamo come appaiono gli arrotondamenti per un bordo punteggiato:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Esempio

Impostiamo un arrotondamento di 10px per gli angoli di una diagonale, e un arrotondamento di 40px - per gli angoli della seconda diagonale:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Esempio

Impostiamo un arrotondamento di 10px per l'angolo in alto a sinistra, un arrotondamento di 30px per l'angolo in basso a destra, e un arrotondamento di 50px - per gli angoli della seconda diagonale:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Esempio

Impostiamo arrotondamenti diversi per ciascuno degli angoli:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Esempio

Creiamo un arrotondamento ellittico, impostando 20px per la parte orizzontale dell'arrotondamento, e 40px - per quella verticale:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Esempio

Ora impostiamo un diverso arrotondamento ellittico per tutti gli angoli separatamente:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Esempio

Se per un blocco quadrato si imposta un arrotondamento pari alla metà del lato del quadrato, si otterrà un cerchio:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Esempio

Se si imposta un arrotondamento maggiore del lato del quadrato, si otterrà comunque un cerchio:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Esempio

Un cerchio si può ottenere anche impostando border-radius a 50% (il vantaggio è che cambiando le dimensioni del quadrato non sarà necessario modificare l'arrotondamento):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Esempio

Se si imposta border-radius in percentuale per un rettangolo, si otterrà un arrotondamento ellittico. Se la larghezza è impostata a 400px, l'altezza a 200px, e border-radius a 10%, è equivalente a scrivere 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Esempio

Impostiamo il valore border-radius a 50% per un rettangolo - si otterrà un'ellisse:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Esempio

La proprietà border-radius arrotonda non solo gli angoli del bordo, ma anche dello sfondo:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Vedi anche

la proprietà border,
che è una proprietà abbreviata per il bordo