sintassi: border-style: hidden | dotted | dashed | solid | groove | ridge | inset | outset | double | none

Questo stile definisce se e come viene disegnato il contorno (bordo) di un elemento (es. un paragrafo). Per default il suo valore è none, cioè non viene visualizzato nessun bordo. Vediamo qui un esempio di paragrafo con bordo:

e questo è il risultato della visualizzazione:

Questo è un esempio di paragrafo con border-style solid. Osservate il riquadro nero intorno al bordo del paragrafo.

Con gli stili è anche possibile definire separatamente l'aspetto del bordo superiore, inferiore, destro e sinistro, specificando border-top-style, border-bottom-style, border-left-style, border-right-style. Si osservi a questo proposito l'esempio seguente:

Questo è un esempio di paragrafo con border-style definito in maniera diversa per ciascuno dei quattro lati del bordo.

che è stato realizzato nel seguente modo:

Un modo più sintetico per ottenere lo stesso risultato è il seguente:

Si osservi che i valori del bordo dei quattro lati sono indicati in senso orario partendo dal lato superiore del contenitore.

ATTENZIONE:

Se non viene specificato lo stile del bordo, il suo valore di default è none, cioè non viene visualizzato nessun bordo e gli altri stili (border-width, border-color) non hanno nessun effetto.

→Per approfondire: W3 School

sintassi: border-width: thin | medium | thick | lenght

Con questo stile si può definire lo spessore del bordo, mediante parole chiave (thin, medium o thick) oppure fornendo la lunghezza lenght (in varie unità di misura: px (pixel), mm (millimetri), percentuale etc.). Si consideri l'esempio seguente:

Questo è un esempio di paragrafo con border-style solid e spessore del bordo 1 pixel

realizzato nel seguente modo:

Anche in questo caso è possibile specificare separatamente gli spessori dei diversi bordi (con border-top-width, border-right-width etc.) oppure usare la notazione sintetica, come mostrato nell'esempio seguente:

Questo è un esempio di paragrafo con border-style solid e spessore dei bordi 1, 2, 3 e 4 pixel

realizzato nel seguente modo:

→Per approfondire: W3 School

sintassi: border-color: colore

Con questo stile è possibile specificare il colore dei bordi (con le stesse regole viste in generale per gli stili colore):

Questo è un esempio di paragrafo con i bordi colorati con colori diversi

realizzato nel seguente modo:

→Per approfondire: W3 School

Mediante gli stili è possibile controllare con grande precisione la visualizzazione delle tabelle. Per quanto riguarda in particolare i bordi della tabelle e delle singole celle, si consideri l'esempio seguente:

che viene visualizzato nel seguente modo:

Si noti che lo stile del bordo applicato all'elemento table si riferisce al bordo di contorno della tabella (nel nostro esempio colorato in rosso). Le singole celle per default non hanno bordo, a meno che non venga specificato uno stile sull'elemento td.

In generale affinché la tabella venga visualizzata come una griglia con tutti gli elementi racchiusi da un bordo, occorre applicare il bordo agli elementi <table>, <tr> e <td> come nell'esempio qui sotto:

Il risultato è il seguente:

Si noti però che in questo modo tutti i bordi risultano raddoppiati (infatti vengono visualizzati i bordi di ogni cella, di ogni riga e di tutta la tabella). Per evitare questo bisogna usare lo stile border-collapse: collapse in questo modo:

Il risultato è il seguente:

→Per approfondire: W3 School

E' possibile specificare diversi stili di tipo font con un'unica istruzione (si parla in questo caso di shorthand o abbreviazione). Per esempio:

equivale a:

Per quanto riguarda l'ordine con cui devono essere specificati i diversi stili, il W3C raccomanda di seguire l'ordine precedente. E' possibile omettere qualsiasi valore. Se un valore viene omesso, viene utilizzato il corrispondente valore di default.

→Per approfondire: W3 School

precedente -successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania