About   All Tips   Tips by Category   Tips by Ability   Help!

Borders Around Post Images

Putting a thick border around your photos can really make them pop. This tutorial will teach you how to install a border around all of the images in your posts.

This is an intermediate tutorial, as it requires you to modify the HTML of your template. As always, make sure you have downloaded a copy of your current template before proceeding.


To put a border around the images in your posts:

1. Find the .post img { section within the HTML of your template. It is located towards the bottom of the posts section and above the main comments section.

2. Modify the width of the border (circled in red above) to your liking (the higher the number, the thicker it will be).

3. Change the $bordercolor; (circled in green) to #000000; or whatever color you‘d like. Click here for a list of color hex codes. You can also change it by changing the border color in your fonts and colors section.

4. Preview and save.

To remove the transparent border within the black border:
Change the size of the padding (circled in blue above) to 0px. You can also adjust the size by making the number higher or lower.

For example: I wanted a thick, black border around all of the images in my posts, so I:

1. found the .post img { section

2. upped the padding to 6 px (I like the white!)

3. changed the width of the default border to 8px

4. made the color of the border black (#000000),

which looks like this:


There is a downside to doing it this way. Every image (button, photo, etc.) within the posts of your blog will now have a border around it. Click here to see how to remove the built-in border from individual photos/buttons/images within your posts.

Related Posts:
Before/After Mouseover Photos (Advanced)
Remove The Border Around Your Photos
Remove The Border Around Your Header

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

20 comments:

Elaine at Matters of the Heart) said...

Great tutorial and I love that photo.

Jenglamgirl said...

YOU ROCK, THANK YOU!!!!!!

The Rambler said...

I LOVE this (as I always do with your tips.)

I need to come back and pay better attention to the instructions. Me tired. But me wanted to read your tips today :)

Unknown Mami said...

What's up mind reader? How did you know that I was trying to figure out how to do this? Again, thank you. You are awesome.

Orlando Uncovered said...

WOW! Thanks so much for this amazing blog! All of your information is easy to follow!

Reb said...

I heart you. You have saved me so much time. Thank you again and again.

Susie Jefferson said...

I love the black border - I tried it, but also ended up with a border round my signature, which I DON'T want. Is there a way to have the border round the pix alone? I notice your signature isn't bordered. Fingers crossed...

And - my friend just emailed me - she deleted her entire links bar by mistake. Am I correct in saying that once it's gone, it's gone? I can't think of any way she could get it back.

JobandBrittany said...
This comment has been removed by the author.
JobandBrittany said...

do you think you could help me making my pictures i post larger? they seem so small and i can't figure it out.
thanks for your helpful blog! i added a signature and borders around photos!
thanks, brittany

brittanydalomba@hotmail.com

Emii said...

Hey, I love your blog SO much, that I decided to write a post about it on my blog, and I used a couple of your tips to do it! Thanks again =)

http://girlz4godrok.blogspot.com/2009/07/awesome-blog.html

Luv,Emii

Chelsea said...

Oh my goodness!! Your blog is totally awesome!! I will have to check out some of your tips for my blog sometime soon. Keep up the great work!
-Chelsea

♥ Boomer ♥ said...

Where did you post the tutorial on how to allow readers to click on a picture in your post and then hit "x" without leaving your blog?

Thank you for all of the help you provide!!

Kristen said...

So quick and easy. I actually used it to remove my borders. I'm sure I cheated...but it worked. I just changed the numbers to zero.

SUGEETH said...

Excellent !!!! your blog helped me a lot....Thank you very much.
Definitely i will put your blog logo to my blog.

Tamara aka Cheapskate Mom said...

Do you have a tip on how to remove the standard border around photos? :)

Katie said...

Thank you for this wonderful site! I have a question...I can't find the .post img section on my template...Why is that??

resham said...

I want borders around my image, but not around the signature which is below every post...is that possible? If u have tutorial for the same can u pls link??
thank you

Raising Mighty Arrows said...

Thank you so much for this tutorial!

kelly arent-Copper Roof Interiors LLC said...

I just stumbled upon your site from Funky Junk and I think this is awesome! All the info here is putting me on overload....I can't get enough. I had a blog made about 6 months ago and I have forgotten how to do everything. Your site is really going to help! I am blog chanllenged! http://copperroofinteriors.blogspot.com/

Thanks a gazillion!!!!

Brandy Briseno said...

Thanks for the tutorial. I found that my template didn't have a .post img section and I added it. Worked great!