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

cssselettore {
  border-radius: valore;
}

Numero di valori

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

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:

cssselettore {
  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:

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

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

Результат:

Esempio

Vediamo come appaiono gli arrotondamenti per un bordo punteggiato:

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

css#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:

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

css#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:

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

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

Результат:

Esempio

Impostiamo arrotondamenti diversi per ciascuno degli angoli:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Vedi anche