3 Easy Steps To Add A White Border To Images In Wordpress

How To Make Your Pictures Pop On Your Blog

Hey bloggers! Just a quick video to show you how to add a white border to images in WordPress.

Why would you want to do this? Several reasons:

If you do not have a white background on your website, this will clean up your images harsh borders.
Adding a white border to your images really makes them “pop”!
It looks better!

So with that being said, here is a quick how to video that show you how to add a white border to images in WordPress.

3 Easy Steps To Add A White Border To Images In WordPress

1. Backing Up Your Site

Here are the written instructions to completing this task. We have to add some css to your theme (which is super easy). You will only need to do this step once and then you will only have to add the css to the images.

When you are doing anything with your theme, always make a back up of your site before you do anything to your theme!

I like to use ManageWP to manage and backup websites. It is super easy to use and is user friendly!

2. Adding CSS to Your Images

As I mentioned in the video you will need to add this in your CSS class to create a white border around your images. Just paste this into your html right behind your image (see video).

class="img-white-frame"

3. Adding CSS to Your Theme

Now that you have added the css class, you will need to add the styles to your theme. This can be accomplished 3 ways depending on your theme & workflow:

Add the css below to your child theme or your parent theme.
Add the css below to the custom css area of your theme
Install the free plugin: Jetpack. Under the Jetpack menu in your WordPress dashboard click on Jetpack and active the Custom CSS module. Then go to Appearance –> Edit Css and paste the code below there.

.img-white-frame {
	padding: 10px;
	background: #FFF;
	box-shadow: 0px 0px 2px 2px #C8C8C8;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}class="img-white-frame"