Aggiungere un bordo intorno alle immagini

Le immagini fotografiche inserite all’interno di un articolo o di una galleria hanno un aspetto più pulito se contengono un bordo intorno ad esse.

Inserire il bordo ad un immagine è un’operazione piuttosto semplice con il CSS:

img { border: 1px solid #000; }

Non tutte le immagini però necessitano di un bordo intorno ad esse per cui è consigliato realizzare una classe apposita da assegnare all’evenienza:

.imageborder { border: 1px solid #000; }

<img src=”images/foto.jpg” alt=”photo” class=”imageborder” />

In questa demo possiamo vedere in azione la differenza tra un’immagine con e senza bordo.

Si potrebbe anche decidere di lasciare un piccolo padding tra il bordo e l’immagine dando un semplice effetto cornice, la classe imageborder diventa:

.imageborder {
  border: 1px solid #000;
  padding: 5px;
}

Il risultato che otterremo è visibile nel secondo esempio.