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! :)