Borders Around Post Images

Putting a thick border around your photos really makes 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.)

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. I will go into further detail in a future post about how you can manually put a border around individual images without having to do it for all of them. Check this out in the meantime. :)

*Photo of my family courtesy of Camily Teed Photography.