Un’altra interessante proprietà offerta da CSS3 per quanto riguarda i bordi è border-radius.
Questa funzione è stata implementata da Firefox, Google Chrome e Safari 3, e permette di creare contenitori con bordi arrotondati.
Ecco un esempio:
Chi usa Firefox, Safari 3 o Chrome dovrebbe vedere un contenitore con i bordi arrotondati…
La sintassi è piuttosto semplice:
background-color: #ccc;
-moz-border-radius: 5px; /* Firefox 1+ */
-webkit-border-radius: 5px; /* Safari 3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
border: 1px solid #000;
padding: 10px;”
-moz-border-radius: 5px; /* Firefox 1+ */
-webkit-border-radius: 5px; /* Safari 3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
border: 1px solid #000;
padding: 10px;”
Per chi non è in grado di vedere il risultato, ecco uno screenshot dell’esempio:
Tag: border-radius, css3, w3c