Filtra la ricerca ...
Frase esatta
Categorie

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

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

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

# Titolo Anno
1 Valore 1994
2 Valore 1972
3 Valore 1974

Ora prepariamo il foglio di stile CSS3

Compatibilità con i browsers

google_chrome ie firefox safari opera
5.0
4.0 -webkit-
9.0 4.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.

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.