Continuiamo la nostra carrellata alle proprietà css legate al box model scendendo in dettaglio, stavolta, con la proprietà border.

Tale proprietà, permette di specificare contemporaneamente lo spessore, lo stile e il colore del bordo :

#box {

border : 3px solid #900;

}

Va subito precisato che, essendo impossibili da confondere, è possibile scrivere i 3 valori in qualsiasi ordine e che, se non si esplica lo stile, il bordo non sarà comunque rappresentato.

Spessore

Lo spessore del bordo si può esprimere in pixel, em e simili oppure anche tramite una delle 3 seguenti parole : thin (sottile), medium (medio), thick (spesso).

Se il valore non è specificato, di default sarà assunto il valore medium.

Stile

Per quanto riguarda lo stile, invece, le parole chiavi a disposizione sono le seguenti :

• none – nessun bordo. E’ anche il valore di default
• dotted – bordo punteggiato
• dashed – bordo tratteggiato
• solid – bordo come linea continua
• double – il bordo è una doppia linea con uno spazio fra le due linee. La somma delle due linee e dello spazio deve essere uguale allo spessore del bordo.
• groove – bordo scavato
• ridge – bordo sbalzato
• inset – il bordo è tale che il box sembra come incassato nella pagina
• outset – il bordo è tale che il box sembra fuoriuscire dalla pagina

Colore

Terzo e ultimo valore possibile per la proprietà border, è la definizione del colore. In tal caso, il colore è indicabile nella normale sintassi : rbg (0,0,255) o rgb (0,0,100%) oppure #FF0000 o anche #F00

Quando non è specificato, il colore del bordo assume lo stesso del testo presente all’interno del box.

Singoli Bordi

Il css permette di specificare anche l’aspetto dei singoli bordi tramite 4 proprietà che, anche se meno usate, possono comunque risultare utili :

• border-top – bordo superiore
• border-right – bordo destro
• border-left – bordo sinistro
• border-bottom - bordo inferiore

Ognuna di queste 4 proprietà può esser valorizzata esattamente come la proprietà madre border.

Infine, qualora vogliate, invece specificare addirittura i singoli aspetti dei bordi, eccovi le proprietà a disposizione :

border-top-color, border-top-style, border-top-width, border-bottom-color, border-bottom-style, border-bottom-width, border-right-color, border-right-style, border-right-width, border-left-color, border-left-style, border-left-width

Fonte Immagini : Html.net