La proprietà border-radius CSS

I CSS metteno a disposizione la proprietà border-radius per ottenenere angoli arrotondati, le proprietà sono cinque:

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius
5. border-radius

border-top-left-radius agisce sull'angolo superiore sinistro, i valori possono essere espressi sia in percentuali che in misure in px, quando si definisce un solo valore questo viene applicato sia al raggio orizzontale che al raggio verticale, mentre se si definiscono due valori il primo si applica al raggio orizzontale il secondo al raggio verticale.

Codice CSS

 /* Si applica di ugual misura su entrambi i raggi */ 
#box{ 
border-top-left-radius: 30px 
} 

/*Il primo valore è sul raggio orizzontale il secondo sul verticale */ 
#box 
{ 
border-top-left-radius: 30px 20px 
}

per le proprietà border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius valgono le stesse considerazioni.

La proprietà border-radius invece è semplificativa nel senso che definebdo un un solo valore questo si applica a tutti e quattro gli angolo:

Codice CSS

 #box
{ 
border-radius: 20px 
}

equivale a:

Codice CSS

 #box
{ 
 border-top-left-radius: 20px; 
 border-top-right-radius: 20px; 
 border-bottom-right-radius: 20px; 
 border-bottom-left-radius: 20px; 
}

mentre:

Codice CSS

 #box
{ 
border-radius: 20px 40px 
}

equivale a:

Codice CSS

 #box
{ 
border-top-left-radius: 20px; 
border-top-right-radius: 40px; 
border-bottom-right-radius: 20px
border-bottom-left-radius: 40px; 
}

cioè quando si definiscono due valori in border-radius questi corrispondono nell'ordine all'angolo superiore sinistro, all'angolo superiore destro, inferiore sinistro e inferiore destro, definendo quattro valori:

Codice CSS

 #box{ 
border-radius: 20px 40px 60px 80px 
}

equivale a:

Codice CSS

 #box{ 
border-top-left-radius: 20px; 
border-top-right-radius: 40px; 
border-bottom-right-radius: 60px; 
border-bottom-left-radius: 80px; 
}

Come si capisce da quanto detto impostando un 20px questo si applica sia al raggio orizzontale che a quello verticale, è possibile definire anche il raggio verticale, cioè si può dare un valore diverso dal quello dato al raggio orizzontale:

Codice CSS

 #box 
{ 
border-radius: 20px/40px; 
}

in questo esempio si applica a tutti gli angoli 20px sul raggio orizzontale e 40px sul raggio verticale, ma ci si può spingere oltre ad esempio:

Codice CSS

 #box 
{ 
border-radius: 20px 40px 60px 80px/130px 150px 70px 90px;
}

i primi quattro valori sono per il raggio orizzontale mentre i secondi quattro sono per il raggio verticale.

Per quanto riguarda la compatibilità con i browser per ancune versioni di Safari e Chrome si usa il prefisso -webkit-, invece per Firefox -moz-, IE suporta la proprietà standard solo a partire dalla versione 9.0:

Codice CSS

 #box
{ 
-moz-border-radius: 20px 10px 30px 40px; 
-webkit-border-radius: 20px 10px 30px 40px; 
border-radius: 20px 10px 30px 40px; 
}