css3 angoli arrotondati con border-radius

11 settembre 2010 admin css3 - esempi e tutorial

Con la proprietà dei css3 border-radius è possible creare dei blocchi con gli angoli arrotondati in maniera molto semplice e immediata. Vediamo come si fa.

Esempio 1 css3 border-radius

border: 3px solid blue;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
Il border-radius viene utilizzato per arrotondare tutti gli angoli

Esempio 2 css3 border-radius

border: 3px solid red;
-moz-border-radius: 20px 10px;
-webkit-border-radius: 20px 10px;
Il border-radius viene utilizzato per arrotondare gli angoli con un doppio raggio

Esempio 3 css3 border-radius

border: 3px solid green;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
Il border-radius viene utilizzato per arrotondare l’angolo in alto a sinistra

E’ possibile ovviamente utilizzare insieme al border-radius anche le altre proprietà dei bordi come double, groove, inset e outset

Si precisa che attualmente non tutti i browser supportano ancora questo tipo di codice css3 , pertanto potreste non visualizzare correttamente i comandi su elencati.

css3 angoli arrotondati con border-radius

Articoli correlati:

Categorie

Come si fa a navigare in mobilità?

Blogroll