DIGIT-ARC read-only archive · snapshot: July 23, 2026

Adding border for images in your wordpress blog.

17 posts · originally from https://geek.digit.in/community/threads/adding-border-for-images-in-your-wordpress-blog.78937/

Gigacore
Gigacore Original post #1
Jan 24, 2008 at 5:07 PM
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 :

Code:
img {
border: none;
}

… and replace it with this:

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

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” with “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:

*farm3.static.flickr.com/2368/2215762299_9602a2bba8_o.jpg​

This ends the tut and enjoy the PICTURE

P.S: Adding image border will increase indexing effeciency for Search Engines

Via: My Blog
V
vaibhavtek #2
Jan 24, 2008 at 5:15 PM
nice gigacore..*gigasmilies.googlepages.com/6.gif*gigasmilies.googlepages.com/6.gif
Gigacore
Jan 24, 2008 at 5:32 PM
he he.. thanks
debsuvra
Jan 24, 2008 at 8:21 PM
Thanks Gigacore for this nice tuto here. I also use Wordpress and will implement the trick there. :D
nvidia
nvidia #5
Jan 24, 2008 at 8:23 PM
Great work Gigacore!
now the pics in my blog will look better.... :D
Gigacore
Jan 24, 2008 at 8:28 PM
good to see it as useful.. :D
T
The Conqueror #7
Jan 24, 2008 at 8:43 PM
WOW! nice tut


btw nice avatar
Gigacore
Jan 24, 2008 at 9:10 PM
^ thanks :D
skeletor
Jan 24, 2008 at 9:47 PM
thanks a lot........
drgrudge
drgrudge #10
Jan 26, 2008 at 12:05 PM
Always wanted to do this... thanks.

Btw, you know how to do like in this blog: *veerle.duoh.com/blog/comments/creating_patterns_in_photoshop_cs2/
Gigacore
Gigacore #11
Jan 26, 2008 at 12:43 PM
^ u mean the border ?
drgrudge
drgrudge #12
Jan 26, 2008 at 1:43 PM
Yes, the dotted one.
Gigacore
Gigacore #13
Jan 26, 2008 at 2:10 PM
just change "solid" to "dashed"

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

ok.. here is the ready made.

Code:
img {
border:#cc9 1px dashed;
padding:3px;
}
a img {
border-bottom: #000000 1px dashed;
}
napster007
Jan 26, 2008 at 2:56 PM
thanks man
Gigacore
Gigacore #15
Jan 30, 2008 at 4:40 PM
^ lol man.. thanks :D
topgear
topgear #16
Feb 2, 2008 at 8:25 PM
Nice work Mr. Gigacore. Really very Useful. My Regards.
Gigacore
Gigacore #17
Feb 2, 2008 at 8:33 PM
my pleasure..