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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}