CSS: border-radius

La proprietà box-shadow  e border-radius introdotte con i CSS3 consentono di dare effetti al layout di un sito web.

La proprietà border-radius consente di realizzare in maniera semplice e intuitiva angoli arrotondati.

Questa può essere scritta singolarmente per ogni angolo, oppure in modo cumulativo:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius

È possibile definire uno o due valori. Se si definiscono due valori diversi, il primo imposta la misura del raggio orizzontale, il secondo quello del raggio verticale. L’uso di due valori diversi consente di ottenere angoli ellittici. Se si usa un solo valore si applica la stessa dimensione al raggio orizzontale e a quello verticale, ottenendo angoli circolari.

I valori possono essere espressi da un numero accompagnato da un’unità di misura (px o em) o in percentuale.

border-top-left-radius: 20px;
border-top-left-radius: 20px, 40px;

 

Esempio di border-radius
Fonte immagine: abcdtips.com

 

border-top-left-radius
Definisce l’arrotondamento dell’angolo superiore sinistro di un elemento.

border-top-right-radius
Definisce l’arrotondamento dell’angolo superiore destro di un elemento.

border-bottom-left-radius
Definisce l’arrotondamento dell’angolo inferiore sinistro di un elemento.

border-bottom-right-radius
Definisce l’arrotondamento dell’angolo inferiore destro di un elemento.

 

border-radius
È una proprietà a sintassi abbreviata (shorthand) con cui è possibile definire con una sola regola i valori di arrotondamento per tutti e quattro gli angoli di un elemento. La proprietà accetta fino a quattro valori per ciascun raggio dell’angolo (quattro per il raggio orizzontale e quattro per quello verticale). I valori relativi al raggio verticale, se espressi, vanno separati da quelli relativi al raggio orizzontale con una slash (/).

border-radius: 20px 40px 60px 80px/10px 30px 50px 70px;

Se si imposta un solo valore, esso sarà applicato a tutti e quattro gli angoli; se ne usiamo due, il primo sarà applicato all’angolo superiore sinistro e all’angolo inferiore destro, il secondo all’angolo superiore destro e all’angolo inferiore sinistro, etc. Definendo quattro valori, l’ordine in cui sono applicati parte dall’angolo superiore sinistro e segue il senso orario.

border-radius: 20px;
border-radius: 20px 40px;
border-radius: 20px 40px 60px 80px;

 

Queste proprietà sono rese alla perfezione in tutte le versioni più recenti dei principali browser: Internet Explorer 9, Firefox 4, Safari 5, Chrome 4.0+, Opera 10.5+.
Non sono supportate nelle versioni precedenti alla 9.0 di Internet Explorer
Per le versioni precedenti di Firefox, Safari e Chrome, invece, è necessario far precedere i nomi delle proprietà dai prefissi proprietari -moz- (per Firefox) e -webkit- (per Safari e Chrome):

-moz-border-radius: 20px 10px 30px 40px;
-webkit-border-radius: 20px 10px 30px 40px;
border-radius: 20px 10px 30px 40px;

 

Articoli correlati: