Pretty Image Borders with CSS

You may have noticed a lot of the pictures I've been posting lately have a little border around them. I started doing this after I saw Raf's site and realized how easy it is to do with a CSS class.

One of the big annoyances I used to deal with when posting images was that I would always need to add border="0" to the <img> tag to prevent the ugly blue borders that appear when the image is surrounded with a link tag. Although it's possible, I didn't even think to disable all image borders in CSS. By why only disable them when we can make pretty borders too?

Here is the CSS I use (place it in your style.css file if you use one):

[sourcecode lang="css"]
.photo img, .photo a img {
border:1px solid #CCCCCC !important;
padding:5px;
margin-bottom: 10px;
}
[/sourcecode]

And here is how I use it when I'm writing a post in WordPress (keep in mind that I don't use the visual editor):

[sourcecode lang="html"]
<div class="photo">
<a href="http://raamdev.com">
<img src="http://images.raamdev.com/DSC_1112_640.JPG">
</a>
</div>
[/sourcecode]

And here is an example of the output:

The CSS border adds a touch of style to the image and without it the image border would appear sharp and out of place. Since I added .photo a img to the class definition, even images that are linked to something will appear with the nice border.

There are already buttons for creating links and adding images in the WordPress editor, but adding the <div> tags around the image does take a bit of time. Eventually I'd like to write a quick plugin for WordPress that adds a little photo button to the editor bar to automatically add the DIV tag with the proper CSS class already specified.