Onsitus.it:
css web designer (creazione siti web, personalizzazione template, conversione da psd a xhtml) - flash designer (banner pubblicitari, animazione flash, introduzione flash)

home servizi portfolio chi sono css3 css tutorials css template css menu contatti sitemap

CSS3 border-radius

Pagina di prova della proprietà css3 'border-radius' / Testing page for the property css3 'border-radius'

Compatibilità: Safari3+ e Firefox2+ con equivalenti css3 -webkit-border-radius e -moz-border-radius

Compatibility: Safari3+ and Firefox2+ with the equivalent css3 -webkit-border-radius and -moz-border-radius

Ultimo aggiornamento / Last update: 05/09

IT: Articolo completo - EN: Full article

1. border-radius: uno valore specificato / one value specified

border: 5px solid red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

2. border-radius: due valori specificati / two value specified

border: 5px solid red;
-moz-border-radius: 25px 10px;
-webkit-border-radius: 25px 10px;

NB: Firefox non segue le specifiche applicando il primo valore agli angoli superiore-sinistro/inferiore-destro e il secondo valore agli angoli superiore-sinistro/inferiore-destro

NB: Firefox does not follow the specification and applies the first value to the top-left/bottom-right corners and the second value to the top-left/bottom-right corner

3. border-radius con un colore di sfondo e senza bordi / with background-color and no border

background-color: #CCCCCC;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

4. border-radius applicato a un angolo specifico / applied to a specific angle

Angolo superiore sinistro / Top left corner
border: 5px solid red;
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;

Angolo superiore destro / Top right corner
border: 5px solid red;
-moz-border-radius-topright: 25px;
-webkit-border-top-right-radius: 25px;

Angolo inferiore sinistro / Bottom left corner
border: 5px solid red;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;

Angolo inferiore destro / Bottom right corner
border: 5px solid red;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;

5. border-radius con stile differenti di border / with different border style

border: 5px dotted red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

NB: Il valore 'dotted' della proprietà 'border' non è supportato da Firefox con il border-radius

NB: The value 'dotted' of the 'border' property not supported by Firefox with border-radius

border: 5px dashed red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

NB: Il valore 'dashed' della proprietà 'border' non è supportato da Firefox con il border-radius

NB: The value 'dashed' of the 'border' property not supported by Firefox with border-radius

border: 5px double red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

border: 5px groove red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

border: 5px inset red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

border: 5px ouset red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

home servizi portfolio chi sono css3 css tutorials css template css menu contatti sitemap

Onsitus.it: css web designer (creazione siti web, personalizzazione template, conversione da psd a xhtml) - flash designer (banner pubblicitari, animazione flash, introduzione flash)