Le proprietà dei bordi specificano l'ampiezza, il colore, e lo stile dell'area del bordo di un riquadrato.

Larghezza dei bordi:
border-top-width border-right-width border-bottom-width border-left-width border-width
Le proprietà per la larghezza dei bordi specificano la larghezza dell'area del bordo. Le proprietà definite in questa sezione si riferiscono al tipo di valore < border-width >, che può assumere uno dei seguenti valori:
thin - Un bordo sottile.
medium - Un bordo medio.
thick - Un bordo spesso.
< length > - Lo spessore del bordo ha un valore esplicito.

Analizzando i tre esempi seguenti ne deduciamo che :
H1 { border-width: thin }
H1 { border-width: thin thick }
H1 { border-width: thin thick medium }
Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i bordi superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i bordi destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].

Colore dei bordi:
border-top-color border-right-colorborder-bottom-color border-left-color border-color
Le proprietà del colore dei bordi specificano il colore del bordo di un riquadrato. La proprietà 'border-color' imposta il colore dei quattro bordi. I valori hanno i seguenti significati:
< color > - Specifica un valore di colore.
transparent - Il bordo è trasparente (sebbene possa avere larghezza). La proprietà 'border-color' può avere da uno a quattro valori, e i valori sono impostati sui differenti lati come per 'border-width'. Se il colore del bordo di un elemento non è specificato con una proprietà del bordo, i programmi utente devono usare il valore della proprietà 'color' dell'elemento come il valore calcolato per il colore del bordo.

Stile dei bordi:
border-top-style border-right-style border-bottom-style border-left-style border-style
Le proprietà dello stile dei bordi specificano lo stile della linea del bordo di un riquadrato (solid, double, dashed, ecc.). Le proprietà definite in questa sezione si riferiscono al tipo di valore , che può assumere uno dei seguenti:
none - Nessun bordo. Questo valore forza il valore calcolato di 'border-width' a '0'.
hidden - Lo stesso che 'none', tranne nei termini di risoluzione di conflitti tra bordi per gli elementi di tabella.
dotted - Il bordo è una serie di punti.
solid - Il bordo è un singolo segmento di linea continuo.
dashed - Il bordo è una serie di brevi segmenti di linea.
double - Il bordo è composto di due linee solide. La somma delle due linee e dello spazio fra di esse eguaglia il valore della 'border-width'.
groove - IIl bordo appare come se fosse scolpito in un riquadro
ridge - L'opposto di 'groove': il bordo appare come se uscisse dal riquadro.
inset - Il bordo fa sembrare l'intero riquadrato come se fosse incastonato nel riquadro.
outset - L'opposto di 'inset': il bordo fa sembrare l'intero riquadrato come se fosse sbalzato rispetto al riquadro.

La proprietà 'border-style' imposta lo stile dei quattro bordi. Può avere da uno a quattro valori, e i valori sono impostati sui differenti lati come per 'border-width' di sopra.

COMMENTI