Come mostrare bordi diversi in uno o più lati di un elemento HTML

Come personalizzare nei colori, spessore e stile tutti e 4 i lati di un bordo e come nasconderne uno o più utilizzando HTML e CSS

I bordi sono un elemento grafico presente in molte pagine web e vengono inseriti con dei tag ben codificati. Si possono aggiungere bordi a un contenitore come a una immagine e, con qualche accortezza, anche ai player dei video.

Riepilogo brevemente quali sono le regole per aggiungere un bordo con un CSS inline, per esempio in una immagine. Si usa un codice come questo <img style="border: dotted #f00; 4px;" src="URL_IMMAGINE"/>, dove i tag colorati di rosso sono quelli che determinano l'aspetto del bordo.

Il primo attributo (dotted) indica che il bordo sarà punteggiato, il secondo (#f00) ne determina il colore con il suo codice e infine il terzo (4px) ne configura lo spessore.

Invece dei codici che indicano le proprietà di tutti e quattro i lati del bordo, si possono impostare singolarmente. I quattro lati del bordo possono quindi essere configurati separatamente con i tag: border-bottom, border-right, border-left e border-top. Si può quindi creare un bordo con tutti e quattro i lati diversi.

Ricordo anche quali sono gli stili applicabili ai bordi.

Stile del bordo	Descrizione
none;	Non è presente alcun bordo
hidden	Il bordo è nascosto come con none
dashed	Bordo tratteggiato
dotted	Bordo punteggiato
solid	Bordo con linea continua
double	Bordo solido, continuo e doppio
groove	Bordo in rilievo
ridge	Altro stile di bordo in rilievo
inset	Bordo incastonato
outset	Bordo sbalzato

Ecco un esempio di codice con un bordo diverso in ognuno quattro lati.

<div style="width:400px; height:50px; border-left:ridge #047 2px; border-top:groove #e21 3px; border-right:solid #f00 2.5px; border-bottom:dashed #00f 3.5px;">Questo è un contenitore con il bordo con tutti i lati diversi
</div>

che porta a questo risultato:

con ogni lato con uno stile diverso. Utilizzando questo sistema si può mostrare il bordo solo in alcuni lati, e non in tutti. Per esempio ecco quale potrebbe essere il codice per non mostrare il bordo nella parte bassa.

<img style="border-top: 4px solid red; border-right: 3px dashed red; border-left: 3px dashed red;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf11T65z2qI9zVjJFNnUvSAn_BdbhtrBwW7HOix4MTuWsBdrDxcQJwKemmfFqICyWR5eHhNf8XJk3WCRonPW9wLa1YcSLEnXusBA6diuN7ProCLvxrSUl0yZQd8a6t339lPU9y1Ggb30/s1600/villaggio.jpg" width="300"/>

che porta a questo risultato

con un bordo applicato a una immagine, che ha lo stile solid nella parte alta, e lo stile dashed in quelle destra e sinistra. Il colore è sempre rosso così come lo spessore di 3 pixel.

Quando il bordo manca in un solo lato, e negli altri tre ha lo stesso stile, il codice può essere così semplificato:

<img style="border: 3px solid red; border-bottom:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf11T65z2qI9zVjJFNnUvSAn_BdbhtrBwW7HOix4MTuWsBdrDxcQJwKemmfFqICyWR5eHhNf8XJk3WCRonPW9wLa1YcSLEnXusBA6diuN7ProCLvxrSUl0yZQd8a6t339lPU9y1Ggb30/s1600/villaggio.jpg" width="600"/>

con il tag border-bottom:0; che di fatto nasconde il bordo nel lato inferiore della foto in questo modo:

Per concludere vediamo quello che è il codice più dettagliato possibile con cui impostare singolarmente ogni parametro per ciascun lato del bordo. Facciamo l'esempio di un contenitore rettangolare.

<style>
.bordopersonalizzato {
   width:400px;
   height:300px; 
   border-bottom-color: red;
   border-bottom-style: solid;
   border-bottom-width: 4px; 
   border-left-color: green;
   border-left-style: dashed;
   border-left-width: 3.5px; 
   border-right-color: blue;
   border-right-style: dotted;
   border-right-width: 3.5px;
   border-top-color: yellow;
   border-top-style: double;
   border-top-width: 4px;
}
</style>
<div class="bordopersonalizzato"> Testo del contenitore </div>

che porta a un risultato come questo

Come accennato in precedenza si può inserire un bordo anche a un video di Youtube. Basterà incollare p.e. questo codice <div style=" width:560px; border: dotted #f00; 4px;"> prima del codice dell'iframe fornitoci da Youtube per poi aggiungere il tag </div> alla fine. La larghezza 560px deve essere uguale a quella del video. Chi volesse approfondire questi temi può scaricare il mio ebook gratuito Guida all'HTML e al CSS.