Using CSS for Image Borders

The following is a Guest Post written by Volkan Görgülü. Thanks Volkan!

The picture used in this article, The Solitude of the Fisherman, is from Daniel Cheong. I have come across with this picture in an article at Smashing Magazine.

Generally when we put borders around our images, as you can see in the example below, they make the image look more appealing. They make the image stand out from the other content on the page.

Without Border:

With Border:

With a “Double Border“:

Like I did in the above pictures, you can easily achieve this look with using image editing applications like Photoshop, ImageReady or Fireworks. But lets think of a scenario in which you need to change the look of your website and the previous border color you used around your images doesn’t fit with your new design. You will need to open up your images one by one and replace that border. If you have 3 or 4 images it will take minutes, but think of having 50 or more images…

You can achieve the same effect very easily with using pure CSS and it will take you seconds to change the color of the borders in the future.

How to do it?

Simple thin border:

img { 
   border:1px solid #021a40;
}

The “Double Border”:

img {
   padding:1px;
   border:1px solid #021a40;
}

Double Border with different inside border color:

img {
   padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;
}

Another advantage of this technique

Since we usually decrease the quality of the images for web (optimization), when you zoom to the pictures with borders you will notice that the color of the border is distorted. Now I will use a lighter blue to let you see the distortion obviously. The left image’s borders is from CSS and the right one is from the image itself.

EXAMPLE PAGE

While we are on the subject of image borders, check out some of the cool features CSS3 has in store with the border-image property.