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;
margin-bottom: 10px;

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="">
<img src="">

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.

Write a Comment


  1. You don’t really need to put the div in there. This is my css class for photos:

    .photo{border:1px solid #CCCCCC; padding:5px; display:block; margin:auto;}

    However, I do use divs for photos, but it’s only because I want to add captions below the images. This is the css for that.

    .photoDiv{text-align:center; margin-bottom:10px;}
    .photoDiv img{border:1px solid #CCCCCC; padding:5px; margin-bottom:10px;}

  2. Thanks Raf!

    The reason I’m using a div is because when I post a screenshot of something I don’t want the border to show up. I suppose an easier method would be to use a div when I want to remove the border — that way I don’t have to add the div for all the other images I post. 🙂

  3. So being new to this…. is there a way to add the border to a slide show. This is the code that is needed for the slideshow to work on my site:


    var ssConfig = {
    AlbumID: ‘8138###’,
    newWindow: ‘false’,
    transparent: ‘true’,
    splash: ‘’,
    showLogo: ‘false’,
    clickToImage: ‘true’,
    showThumbs: ‘false’,
    imgAlign: ‘top’,
    showButtons: ‘true’,
    crossFadeSpeed: ‘350’};

    SM.flash.insertSlideshow(600, 400, ssConfig, ‘transparent’);


    • If the slideshow software allows you to configure CSS, or if it has a CSS stylesheet file that you can modify, then you should be able to add the border. If everything is hard-coded or generated by the PHP, then it won’t be so easy.