tabelle arrotondate con css3

Come arrotondare i bordi di una tabella HTML con CSS3 (CSS3 Rounded Tables Borders)

Con il CSS3 si possono creare davvero cose molto carine e di sicuro impatto visivo, per esempio oggi vediamo come creare una tabella con i bordi arrotondati, utilizzando solo il CSS3 senza ricorrere a JQuery.

Iniziamo scrivendo L’HTML che conterrà semplicemente la nostra tabella applicando una classe che per convenzione chiameremo bordered

Tabella con bordi arrotondati - CSS3 rounded Tables

#TitoloAnno
1Valore1994
2Valore1972
3Valore1974

Ora prepariamo il foglio di stile CSS3

Compatibilità con i browsers

google_chromeiefirefoxsafariopera
5.0
4.0 -webkit-
9.04.0
3.0 -moz-
5.0
3.1 -webkit
10.5

La proprietà border-radius è compatibile con i maggiori browser più aggiornati, per avere la compatibilità con versioni di Microsoft Internet Explorer antecedenti alla 9.0, è necessario ricorrere ad un escamotage.

Come rendere il border-radius compatibile su (Internet Explorer) IE8, IE7 e IE6

Se riguardate il CSS che ho scritto sopra, troverete in alcune righe e più precisamente ogni volta che viene richiamata la proprietà border-radius, questa sintassi behavior: url(border-radius.htc); questo è un file che contiene le istruzione per rendere compatibile i bordi arrotondati anche su queste versioni di Internet Explorer, è sufficiente mettere il file border-radius.htc nella stessa cartella in cui risiede il file CSS.

Pin It on Pinterest