The image, The Solitude of the Fisherman, used in this article is from Daniel Cheong and I have come across with this image in an article at Smashing Magazine.
Generally when we put borders around our images, as you can in the below example, they made the image look more appealing, they made the image outstand from the other content on the page.
Like I did, you can easily achieve this look with using image editing applications like PhotoShop, ImageReady or Fireworks. But lets think of a scenerio in which you need to change the look of your website. And the previous border color you use around your images won't fit in with your new design. All you need to do is open up your images one bye one and replace the colors or redraw them. Think of having 50 images...
But you can achieve the same effect very easily with using pure CSS and it will take your seconds to change the colors of the borders in the future.
If you want to just put a border like the below one you can use {border:1px solid #021a40}.
Or you can achieve an effect like below with using the help of padding {padding:1px;border:1px solid #021a40}.
If you want a color other than white between the image and the outer border. You can use the background-color property.
And since we usually decrease the quality images for web when you zoom to the pictures with borders you will notice that the color of the border is distorted. I will use a lighter blue to let you see the distortion obviously. But by using CSS we get solid borders you can see the difference between two images.
