Grow your CSS skills. Land your dream job.

Using CSS for Image Borders

Published by Guest Author

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:
hdr-44.jpg

With Border:
hdr-44_1.jpg

With a "Double Border":
hdr-44_2.jpg

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.

hdr-44_3.jpg

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.

Comments

  1. So far, I used to achieve the double borders using photoshop editing.. Now it is easier with CSS. Good article.

  2. Volkan Görgülü
    Permalink to comment#

    I’m glad, it helped.

  3. CSS is easier than psd editing. I like adding a background to the image so you get a double border effect. (more hear)

  4. Permalink to comment#

    Chris – thanks for your website. I enjoy reading it! I have a question though on img borders. if you see my webpage i am trying to put an rss image to my flickr rss feed but it keeps coming up with the stinking border around it. How do i fix this? I dont know how to have text and img on the same line so i put it in a table. Anyway – what div class or css command do i need to input to get rid of the border?

    <a href="http://api.flickr.com/services/feeds/photos_public.gne?id=8278388@N03&lang=en-us&format=rss_200" rel="nofollow"></a> 
    

    flickrss a img { 
        border:0px solid #fff;
        color:#fff;
        text-decoration:none;
        margin:6px;
       float:right;
    

    But the flickrss div is inside the flickr div. Im not too sure how to do a subdiv. thanks! -Joe!

  5. RocknMetal
    Permalink to comment#

    Hi, I can’t seem to get this code to work in IE7 (or 6 for that matter) but works great in FF. There must be a required IE switch missing. Any ideas?

    .imageBorder {
    padding:7px;
    background-color:#F5F4F2;
    border:1px solid #c8c8c7;
    float:middle;
    margin: 5px;
    }

  6. I ran into this page while trying to fix the same problem as RocknMetal, above. It just doesn’t work in IE. Do you have a trick for that? Thanks anyway.

  7. Guest
    Permalink to comment#

    Indeed I used to do this with photoshop too. Great article Volkan, thanks.

  8. Permalink to comment#

    I’m assuming there is a number somewhere in that green mess that I am supposed to see huh?

  9. seeker
    Permalink to comment#

    Thanks for this Information about CSS. Very helpful.

  10. Permalink to comment#

    I am trying to implement this CSS Script to one of my ID Card blogs. Hope this CSS script will enhance the Image Border.

    Thanks for the info.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".