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.
22 / 49

Rimuovere il bordo blu intorno alle immagini

I Video di HTML.it

Intervista a Mario Viviani, il primo GDE (Google Developer Expert) per Android italiano