Over a million developers have joined DZone.

Using CSS for Image Borders

DZone's Guide to

Using CSS for Image Borders

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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:

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 {
   border:1px solid #021a40;

Double Border with different inside border color:
img {
   border:1px solid #021a40;

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.



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.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}