Over a million developers have joined DZone.

Using CSS for Image Borders

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

The following article was 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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}