This is a simple tutorial on adding light effective drop shadow borders to images.

Drop shadows make an image or photo stand out on a page making it seem like it has a little weight behind it.

Borders are easy to apply to any image using the border attribute but using more CSS can produce a good visual result without the use of additional images.

This effect can be applied site wide on just the ‘img’ tag if needed.

The code I have used to produce the effect which gives my image light borders, padding and a little space from the text.
background: #fff;
padding: 5px;
margin: 0 15px 15px 0;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;

This is my first ‘border’ without using the border tag.
background: #fff;
padding: 5px;

The margin is to simply push the image away from the other image.

margin: 0 15px 15px 0;

The borders are very light but give a slight shadow on the side of the image. Using border top, bottom, left or right would show the light hitting the border.
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;


Change the background tag to any colour depending on the background of your page.

If your page has a light grey background then white ‘background’ and a light grey border will produce the best visual result however if you have a dark background, or need a stronger effect, use a dark grey on the background tag and light grey on the border tag.

background: #666;
padding: 10px;
margin: 0 15px 15px 0;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;

Using more padding will help define the image but don’t over do it as it might bring back that whole retro tables feel!

Lastly, adding an even lighter border to the opposite sides of the first borders will help the image stand out with white padding on a white background.

background: #fff;
padding: 10px;
margin: 0 15px 15px 0;
border-top: 1px solid #F0F0F0;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #999;
border-bottom: 1px solid #999;

Comments, corrections and opinions welcome as always!