It used to be easy to add an image border to an image in a post or page prior to WordPress 3.9. For some reason, that functionality was removed and left a lot of people (including me) wondering how to do it.
You can use the WP Image Borders Plugin to automatically add borders around your post images. Simply install the plugin and check the settings checkbox entitled “Add borders to all images in blog posts.” However, just as the setting says, it will add borders to all images.
To bypass that, you would need to specify a list of CSS classes of image containers that you wish to exclude. That may be a bit more difficult for typical WordPress users.
If you’re looking for a way to add a simple border to your images on an image-by-image basis, this post will show you how.
This post explains how to create a simple CSS style that puts a solid black one-pixel border around an image.
How to Add Custom CSS for the Border Style
CSS is a language that describes the formatting and style of elements on a web page. An in-depth look at CSS is beyond the scope of this article, but you can learn more about CSS when you have time.
First, you’ll need to be able to add some custom CSS to your WordPress theme. If you’re not a developer, this might seem a bit difficult, but it’s really not.
We’re going to add a simple solid black 1 pixel border style to our CSS stylesheet. Here is the code for the style:
border: #000 solid 1px;
If you want the border to be another color, simply replace the #000 hex color value with the hex color value that you wish to use for the border.
There are a few ways you can add this custom CSS to your WordPress theme, and this post will show you several examples. Once you understand how to add the custom CSS, read on to learn how to apply the border style to your image.
How to Add an Image Border in WordPress
Now we want to apply that border style to an image.
To do so, click on an image in your post or page and edit that image by clicking on the pencil icon:
Add the image CSS class, which we have named .border-black.
Now your image will have a nice border around it when your post or page is viewed:
I know this seems like extra steps, but it really is a very simple solution.
I’ve also recorded a short YouTube video tutorial that explains how to add an image border in WordPress using the steps we’ve outlined above.
I hope this is helpful to you and please feel free to leave your questions in the comments below.