Con la proprietà CSS border-radius si può dare a qualsiasi elemento "angoli arrotondati".

La proprietà border-radius

La proprietà CSS border-radius definisce il raggio degli angoli di un elemento.

Di seguito riportiamo tre esempi:

1. Angoli arrotondati per un elemento con un colore di sfondo specificato
2. Angoli arrotondati per un elemento con bordo
3. Angoli arrotondati per un elemento con un'immagine di sfondo

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Visualizza esempio

CSS border-radius: specificare ogni angolo

La proprietà border-radius può avere da uno a quattro valori. Ecco le regole:

Quattro valori - border-radius: 15px 50px 30px 5px; (il primo valore si applica all'angolo in alto a sinistra, il secondo valore si applica all'angolo in alto a destra, il terzo valore si applica all'angolo in basso a destra e il quarto valore si applica all'angolo in basso a sinistra);

Tre valori - border-radius: 15px 50px 30px; (il primo valore si applica all'angolo in alto a sinistra, il secondo valore si applica agli angoli in alto a destra e in basso a sinistra e il terzo valore si applica all'angolo in basso a destra);

Due valori - border-radius: 15px 50px; (il primo valore si applica agli angoli in alto a sinistra e in basso a destra e il secondo valore si applica agli angoli in alto a destra e in basso a sinistra);

Un valore - border-radius: 15px; (il valore si applica a tutti e quattro gli angoli, che sono arrotondati equamente:)

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Visualizza esempio

Si possono creare anche angoli ellittici:

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Visualizza esempio

Proprietà degli angoli arrotondati CSS