Adding border for images in your wordpress blog.

Picture without a frame is not a picture, its just an image. Adding borders to the images in your wordpress blog will enhance the look of your theme.

Not all the wordpress themes come with image borders by default. You need to add few lines of code to get the image border.

This tutor tells you on how to add a image border to the images in your wordpress theme. You can follow this tutorial only if your theme doesn’t come with default border for images.

To add the border, follow this steps:

1. Go to your wordpress Admin CP.
2. Click on Presentation and the select the theme for which you want to add image border.
3. Click on “Theme Editor”
4. Open “Stylesheet” or “style.css” whatever from the right hand list.
5. Now you must be able see the CSS codes.

Find this :

img {
border: none;
}

Code (markup):

… and replace it with this:

img {
border:#cc9 1px solid;
padding:3px;
}
a img {
border-bottom: #b8860b 1px solid;
}

Code (markup):

And click on “Update File”

Now you must be able to see a border around the images in your blog.

You can customize the border in the way you want. Here are few quick customization you can do:

1. To change the distance between the border and the image, increase or decrease the number in “padding”. For example, in the code above the padding is 3, you can increase it to 4, if you want more gap between the image and the border.

2. You can have “Dashed” border style. To do this, replace “solid” to “dashed” in both the lines.

3. To change the color of the border line, you need to change the color code (HEX) value with the valid CSS/HTML color code.

For example, in the above code, the color code is “#b8860b”, which is light brown in color. If you want to have a black border line, you can change it to “#000000″

Click Here for a list of all the valid HTML and CSS Color codes.

And now finally your images will appear with a border and looks like this:

​

This ends the tut and enjoy the PICTURE

 

Thank you for all the valuable content of your site: Digital Point! I am new to Wordpres Blogging and have an issue I hope you can help with, as i have not been able to get any answer/help from Wordpres Support Forum. I currently have borders around a post images by adding the word frame with in the HTML Code from within the post: "alignnone frame size-medium wp-image-150". I am hoping to figure out how to add small text underneath these images (within) the frame along the bottom. This blog shows an example of what I am trying to accomplish: http://www.artbizblog.com/2011/04/live-art-marketing-events.html I am unsure if this is a plugin? Any advise would be great! Thank You!

 

Gigacore,
Thank you for this advice.
There is only one trouble: all the images in all the pages get the same border setting. Even if I place an image in the "text" widget, this one will receive the same border.
I tried to change this by adding a "border=0" in the html of the widget, but it obviously gets before the CSS border instruction.
Any idea to solve this?

Sorry, I am not too smart with coding..... -Yves.

 

@sevy01 - You can define a particular class for those types of images where you do not want border and apply that to those specific images. It would not be that a difficult task.