CSS Tutorial: Adding border line for the images in blog posts

This post is special for Ilyas Kazi.

Adding border line for the images is very easy. You only need simple CSS technique. The basic CSS for this case is,

img {
padding:5px;
margin:5px;
border-width: 5px;
border-color: #0066CC;
border-style: single;
}

Feel free to modify parameters in the CSS code above. There are many different “border-style” parameter. Which one do you like?

The CSS code above will be applied to all of your images in your web pages. To give border line only for the images in your blog posts, you have to read the implementation for both Wordpress and Blogger below.

Wordpress

.post img {
padding:5px;
margin:5px;
border-width: 5px;
border-color: #0066CC;
border-style: single;
}
img.wp-smiley {
background: none;
padding: 0;
margin: 0;
border: 0;
}

Add the code to style.css file in your current wordpress theme directory.

Blogger

.post img {
padding:5px;
margin:5px;
border-width: 5px;
border-color: #0066CC;
border-style: single;
}

Go to Layout - Edit HTML. Add the code to your blogger template (XML) exactly before ]]></b:skin>

If you like this post then please consider subscribing to our MagzNetwork RSS feed. You can also subscribe by email and have our news sent directly to your inbox.