PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

How to add borders to your images in posts

Posted by on 13th Jun 2008 | 11 comments

Statue of LibertyI always think it’s a good idea to add images to blog posts when you can. They make posts visually more appealing and are useful for breaking up large sections of text.

Using CSS, you can add a border to your post images to make them even more appealing. To do this you first need to find the CSS class which controls what happens in your posts. If you edited the img selector on it’s own you would edit how every image on your blog is displayed however in this situation we only want to change how the images inside posts are displayed (ie. you dont want to add a border to every image on your blog design!).

For WordPress users this class is usually called entry however you should double check to see which class is wrapping round ‘the_content’ or ‘the_excerpt’ as I’ve seen some designers change this.

Here is an example of a typical class for post images.

[sourcecode language='css']
.entry img {
border: none;
margin: 5px;
}
[/sourcecode]

The img tag tells your browser that you only want to edit the images in your class entry. In this example images placed inside posts would have no border a margin of 5 pixels all around. It’s important to add a margin to your images so that there is a small gap between your text and the image.

There are 3 main properties for controlling the way a border is displayed.

  • border-width : This can be set in pixels, em or as a percentage.
  • border-style : The style of the border is the type of border which is displayed. Here is a list of the values you can use
    • none
    • hidden
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
  • border-color : The color can be set in hexadecimal or in plain english eg. for the color red you could use ‘red’ or ‘#ff0000.

Some examples to help you understand the basics of adding borders to your images

Here are some examples to help you understand how all of this works in practice. The margin remains the same in all examples however I have kept the code in to remind you to add it to your post image class. Just remember, this margin determines how much space is surrounding your image.

Let’s start by showing how a picture of the statue of liberty looks with our original class.

No border and 5 pixel margin
[sourcecode language='css']
.entry img {
border: none;
margin: 5px;
}
[/sourcecode]

Statue of Liberty

Now lets say we want to add a solid red border to our image to make it look more appealing.

Solid 1 pixel red border with 5 pixel margin
[sourcecode language='css']
.entry img {
border-width:1px;
border-style:solid;
border-color:red;
margin: 5px;
}
[/sourcecode]

Statue of Liberty

Perhaps you would like the border to be a bit larger and dashed too.

Dashed 5 pixel black border with 5 pixel margin
[sourcecode language='css']
.entry img {
border-width:5px;
border-style:dashed;
border-color:black;
margin: 5px;
}
[/sourcecode]

Statue of Liberty

In the examples above I have specified border-width, border-style and border-color seperately however CSS allows you to do all of this in the one line. In practice this is how most designers do it. You list all 3 properties using the property border.

Both of the CSS classes below produce the same results.

[sourcecode language='css']
.entry img {
border-width:5px;
border-style:dashed;
border-color:black;
margin: 5px;
}
[/sourcecode]

[sourcecode language='css']
.entry img {
border:5px dashed black;
margin: 5px;
}
[/sourcecode]

Using padding with your images

Whereas margin specifices the space between your content and the area around it, padding specific the space inside of your content. In practice this means that there is a gap between your image and the border. This is a neat effect and one which can really make your images stand out.

Here’s an example to show you how our border is now displayed with padding.

Solid 3 pixel blue border with 5 pixel padding and 5 pixel margin

[sourcecode language='css']

.entry img {
border:3px solid blue;
padding:5px;
margin: 5px;
}
[/sourcecode]

Statue of Liberty

As you can see from the above image, the padding option gives a kind of frame effect. I used a blue border above to match the sky background in the picture so that the frame does not look out of place.

In my opinion, using padding with your border is a great way to make your post images stand out. Remember, in CSS you can control the size of margins and padding for all 4 sides of a content area. This can be very useful. For example, if you are aligning an image to the right hand side of a post you may not need a margin at the right hand side but you will need it at the top, left and bottom.

Even more control over your borders

You can extend the main 3 properties to control how the top, left, right and bottom border are controlled. This is helpful if you want one side of the image to have a different kind of border from the others.

To control how a specific area is controlled you just need to place the side name in the property. For example, to control the color of the bottom of your border you would use border-bottom-color. To control the right style of a border you would use border-right-style.

Here is a ridiculously overcomplicated example to show you how much you can control your border by using these additional properties. Obviously no one in their right mind would use a border like this but I hope it helps illustrate how all this works in practice.

An extremely overcomplicated example
[sourcecode language='css']
.entry img {
border-top-width:1px;
border-top-style:groove;
border-top-color:blue;
border-left-width:5px;
border-left-style:ridge;
border-left-color:green;
border-right-width:3px;
border-right-style:outset;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:dashed;
border-bottom-color:black;
padding:5px;
margin: 5px;
}
[/sourcecode]

Statue of Liberty

Overview

I hope I have shown that with just a few lines of code, you can easily control how your images are displayed in your blog posts. There really is no limit to what you can achieve. You can create a variety of image borders and add them to your stylesheet and simply use the one you need for that image. For example, by default you could have no border in post images however you could create a class called ‘border1px’ which adds a 1 pixel black border to your image.

I encourage you all to try this out. If you are unsure about any of this and need some help please leave a comment. I’ll do my best to explain anything which isn’t clear.

Good luck :)


Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity and Social Media on his personal blog and provides support to bloggers at Rise Forums. He can also be found on Twitter @KevinMuldoon and Google+.

11 comments - Leave a reply
  • Posted by Cassiano Travareli on 13th Jun 2008

    Great tips! But in blog articles i prefer do not use border in my images.

    but in the examples that you did i think that in the 5 example:

    .entry img {

    border:3px solid blue;

    padding:5px;

    margin: 5px;

    }

    is the best option!

  • Posted by Kevin Muldoon on 13th Jun 2008

    Yeah I agree.

    The examples I used were to help readers understand how the code works. The last border example I used was horrible however it does show you how much control you can have over your border.

    Again. yeah I agree with you. The blue frame border looks best with this picture. With this kind of thing, it's all about experimenting and seeing what fits for you and your blog design. :)

  • Posted by Pachecus on 13th Jun 2008

    Useful tips… Simple but effective .. thanks for share

  • Posted by Missy from Groovy Ve on 13th Jun 2008

    Hi, Kevin:

    Which page is the coding for this to be found. Is it in the "Single Post" page within WP dashboard?

  • Posted by David Shaw on 13th Jun 2008

    Nice post Kevin…

    Reminds me that I really need to use more images in my blog posts!

  • Posted by Cellulite Lady on 13th Jun 2008

    Everytime I see or read a site like yours, I realize just how much more I have to learn. Good ideas and I've used them before but your site looks really really great. Thanks for sharing!!

  • Posted by Suzanne Franco on 13th Jun 2008

    OMG … I just figured out a problem with the image borders on my blog tonight … been struggling with it for weeks. LOL Do you happen to know if the entry would be the same as "story"?

    The code that was in my theme was messing up my eBay affiliate widgets.

    I'm a little bummed because my theme had a dashed line border and it looked pretty good … except it just wouldn't work with the eBay stuff. With these tips maybe it will motivate me to code a border for some of my images on their own. Thanks for the great tips! *SmiLes* Suzanne

  • Posted by Kevin Muldoon on 14th Jun 2008

    Glad you liked the post guys. I'm going to be bringing more css tips in the next few weeks.

    Suzanna – Glad this helped you. If you're having any problems with this just post a thread in the forums and I'll do my best to help you :)

    Missy – The single php template will show you what class you need to change in your stylesheet.css file (as will the index.php, they should be the same but double check). It will be the class which wraps around either the_content or the_excerpt.

    For example, the code to generate posts on bloggingtips is

    <div class="entry">

    <?php the_excerpt(); ?>

    </div>

    The entry class above is the one which is in the default templates for wordpress so most designers keep the same name (though some do change it for some reason). Thats why you need to edit the .entry img class.

  • Posted by TopGun on 28th Jul 2008

    great tips i agree with the earlier post – its a cool trick and really adds to your blog but its the help with the code that most users will find helpful.

  • Posted by Addy on 29th Nov 2008

    hoho very thanks.. :)

    i search many web but down't get anithing that i like.

  • Posted by Elena on 14th Dec 2008

    Thanks for such an important articles about cellulite. This is a very needed because my friend sis is fat and she want slim her body.

    so please help me.

    Thanks