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.
