Bordi perfetti sulle immagini

Come il post precedente, anche questo è a suo modo una segnalazione per un ripasso.

Sono intanto d'accordo con la premessa messa in testa al piccolo tutorial di DZone: sul web un bel bordo intorno alle immagini è un gran guadagno in termini estetici e di resa visiva. E metterlo con i CSS è un'operazione più che semplice. Volendo ottenere un effetto 'doppio bordo' (esterno e interno) basta sfruttare il padding:

img {
   padding:3px;
   border:1px solid #000;
}

In questo modo la parte interna delle cornice assumerà  come colore quello di sfondo definito per l'elemento in cui è contenuta l'immagine. Volendo assegnare un colore diverso basterà  impostare un colore di sfondo per l'immagine:

img {
   background-color: #ff0;
   padding:3px;
   border:1px solid #000;
}

In fondo al tutorial il link ad una pagina di CSS3.info che documenta l'implementazione su Safari 3 della proprietà  border-image, tramite la quale sarà  possibile impostare come bordi di un elemento anche elementi grafici.