Come personalizzare lo stile dei bordi in dimensioni, colori e forma con il CSS.

Come creare dei bordi con stile, colore e spessore determinato utilizzando i tag CSS e HTML.

I bordi sono un elemento grafico presente in moltissime pagine web e per inserirli ci sono dei tag ben codificati. I bordi possono essere inseriti con un CSS inline a un singolo elemento per esempio un paragrafo con questa sintassi <p  style="border: groove #003366; 4px;">Questo paragrafo sarà contornato da un bordo</p> oppure a una immagine con un codice simile a questo

<img style="border: dotted #f00; 4px;" src="http://lorempixel.com/400/200"/>

I parametri colorati di rosso sono quelli che determinano lo stile del bordo. I codici dei colori ne determinano ovviamente il colore mentre 4px è lo spessore del bordo; dotted e groove sono gli stili e significano rispettivamente punteggiato e bordo a rilievo. 

Un altro modo per inserire dei bordi è quello di operare nei CSS vale a dire per inserire una proprietà in tutti gli elementi cha abbiano un determinato selettore. Se per esempio volessimo inserire un bordo in tutte le immagini pubblicate sul nostro blog di Blogger dovremo aggiungere nel modello un codice come il seguente o modificare quello già esistente nella sezione <b:skin>

.post-body img {border: ridge #047 2px;}

PROPRIETÀ SINGOLE DEI BORDI

Si può configurare singolarmente un solo lato del bordo con i seguenti tag:

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

che per chi conosce anche solo un po' di inglese non hanno bisogno di ulteriori precisazioni. Mi limito a ricordare che color è il colore, style è lo stile e che width è lo spessore.  In genere però si utilizzano dei tag più sintetici visto che non c'è quasi mai l'esigenza di creare dei bordi con aspetti e stili diversi per ogni lato. 

PROPRIETÀ ABBREVIATE DEI BORDI

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

che prendono in considerazione più aspetti del bordo. Il tag più utilizzato è il primo cioè border ed è quello che si usa per creare un bordo identico in tutti e quattro i lati dell'elemento.

STILE DEI BORDI

Abbiamo già visto due stili di bordi cioè dotted e groove. Ecco la tabella pressoché completa

Stile del bordo	Descrizione del suo aspetto
none	Non è presente nessun bordo
hidden	Il bordo è nascosto, equivalente a none
dashed	Bordo tratteggiato
dotted	Bordo punteggiato
solid	Bordo con linea continua
double	Bordo solido, continuo e doppio
groove	Bordo in rilievo
ridge	Diverso tipo di bordo in rilevo
inset	Bordo incastonato
outset	Bordo sbalzato

Per rendere più chiari i singoli stili del bordo ecco un'altra tabella esplicativa

border: groove #036 4px;

border: double #036 4px;

border: ridge #036 4px;

border: dashed  #036 4px;

border: dotted  #036 4px;

border:inset  #036 4px;

border:outset  #036 4px;

border: solid  #036 4px;

Gli attributi in rosso sono i vari stili dei bordi, quelli in blu sono i codici dei colori e quelli in viola determina lo spessore del bordo. Nel prossimo articolo vedremo una applicazione di questi codici.