Schönere Bilderrahmen mit CSS

Bilder wirken oft besser, wenn sie umrahmt sind. Das Image-Tag bietet hier ein Attribut namens Border an, aber dieser Rahmen wirkt selten schön. Einen besseren Rahmen kann man mit CSS wie folgt erzeugen:

<img src="/fileadmin/images/demo.jpg" style="background-color:#ffffff;padding:5px;border:1px solid black;" height="200" width="150">

Durch das background-color:#ffffff;padding:5px; wird ein 5 Pixel breites, weisses Passepartout um das Bild erzeugt. Zur Abgrenzung gegen den Hintergrund wird dieses dann noch mit einem 1 Pixel breiten, schwarzen Rand eingefasst. Das Ergebnis sieht dann z.B. so aus: