CSS e gli angoli arrotondati
Da sempre uno degli obiettivi più comuni del web design consiste nella creazione di elementi con gli angoli arrotondati. Fino a qualche tempo fa la soddisfazione di questa esigenza era tutt'altro che banale e richiedeva parecchio codice: la tecnica più diffusa prevedeva l'utilizzo di immagini, create ad hoc, da posizionare in corrispondenza degli spigoli dei box che si desiderava stondare.
Fortunatamente con l'avvento di CSS3 le cose sono cambiate e la creazione di box con gli angoli arrotondati è diventata un'attività molto semplice. Grazie alla proprietà border-radius, infatti, basta una linea di codice CSS3 per raggiungere l'obiettivo.
La proprietà border-radius di CSS3
Creare box con angoli arrotondati con CSS3 è semplicissimo. Basta aggiungere allo stile del box la proprietà border-radius in questo modo:
div.box-con-angoli-arrotondati {
width: 300px;
height: 300px;
background-color: #FFFF00;
border: 3px solid #000000;
border-radius: 30px;
}Assegnano un unico valore alla proprietà border-radius tutti e quattro gli angoli del box verranno stilizzati allo stesso modo (nel nostro esempio avranno tutti l'aspetto di un quarto di cerco con 30px di raggio).
Volendo, però, è anche possibile differenziare l'aspetto dei quattro angoli utilizzando le proprietà specifiche:
- border-top-left-radius (angolo superiore sinistro)
- border-top-right-radius (angolo superiore destro)
- border-bottom-right-radius (angolo inferiore destro)
- border-bottom-left-radius (angolo inferiore sinistro)
Oppure assegnando quattro valori all'unica proprietà border-radius in questo modo:
border-radius: 20px 30px 40px 50px
I quattro valori (rappresentati sempre sotto forma di numero di pixel) riguardano, nell'ordine: l'angolo superiore sinistro (20px), l'angolo superiore destro (30px), l'angolo inferiore destro (40px) e l'angolo inferiore sinistro (50px).
Come utilizzare il generatore di codice CSS3 per la proprietà border-radius
L'utilizzo del tool presente in questa pagina è semplicissimo. E' sufficiente specificare il valore (in pixel) del raggio per ciascun angolo dopodichè copiare ed incollare il codice CSS generato automaticamente all'interno del proprio foglio di stile.
Il codice CSS, più precisamente, dovrà essere aggiunto allo stile del box che si desidera stondare, in alternativa potrà essere creata un'apposita classe da applicare a tutti i box che si desidera arrotondare secondo le specifiche definite.
