How to add borders to your images in posts

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 🙂

11 Comments

  1. Cassiano Travareli June 13, 2008
  2. Kevin Muldoon June 13, 2008
  3. Pachecus June 13, 2008
  4. Missy from Groovy Ve June 13, 2008
  5. David Shaw June 13, 2008
  6. Cellulite Lady June 13, 2008
  7. Suzanne Franco June 13, 2008
  8. Kevin Muldoon June 14, 2008
  9. TopGun July 28, 2008
  10. Addy November 29, 2008
  11. Elena December 14, 2008