Border Radius CSS 3 su tutti i browser…

Il Border Radius CSS 3 è conosciuto ormai da tempo e, fortunatamente, anche i browser più "legnosi" lo compilano "quasi" correttamente.
Uno strumento comodissimo per scrivere in due secondi le righe di codice necessarie per creare bordi stondati in Internet Explorer 9, Firefox ed i Browser Webkit based, stile Safari e Chrome, è border-radius.com, che potete utilizzare direttamente da questa pagina…

La pagina risulta molto minimale ed elgante; ci propone 4 campi, agli angoli, nei quali inserire il border radius css 3 che si vuole attribuire a ciascuno spigolo ed una textarea centrale nella quale viene generato il codice non appena modificheramo il primo campo…

Davvero uno strumento utile sia per chi non ha mai usato il border radius css 3, o non molto pratico di CSS, sia per chi non ha spesso voglia di scrivere manualmente tante righe di codice per rendere il bordo stondato in css 3 visibile su tutti i browser…

Ecco un esempio di come utilizzare il tool qui sopra:

Inserire nei 4 angoli della pagina le misure che seguono:
Top Left:             10
Top Right:           5
Bottom-Right:      10
Bottom-Left:        5
…il codice generato è il seguente:

div{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px;
}

Una volta scoperto, uno strumento del genere, non resta che aggiungerlo ai preferiti… per ritornarci ogni volta che, lavorando sul css del proprio sito web, si ha la necessità di stondare il bordo di qualche div 😛

Commenti