Last Reviewed: 6th March, 2016
I wanted to improve the readability of my WordPress posts by placing a border around some images that had a white background. Without a border it was difficult to tell what was text and what was part of the image.
One way to solve the problem would have been to edit the cascading style sheet (CSS) for my blog and add a new class. I didn’t want to do this because I wanted to use the default theme (e.g. Songwriter) as much as possible and have clear documentation about any modifications that I made.
Another way to solve the problem would have been to edit the <img> HTML tag associated with a particular image and add the border that way. I might use this if I need a custom border type for one or two images but I didn’t like the thought of doing this for a commonly reoccurring problem.
In the spirit of WordPress, I decided to utilise the WP Image Borders plugin. The plugin description says that it makes it easy to add or remove image borders from pictures in your blog posts. This sounded perfect.
- WordPress version 4.4.2
- WP Image Borders Plugin version 2.02
Configuring the plugin
The WP Image Borders plugin has a single settings window in which you can perform your customisations.
In this example, I specified that a custom .border-image CSS class will be added to the <img> element.
I configured the plugin to add a thin border around my images.
I only wanted the border to apply to selected images so I made sure that “Add borders to all images in blog posts” setting was left unchecked.
Using the plugin
Within my blog post, I selected the image to which I wanted to add a border, and clicked on the “Edit” button.
In this example, I specified the “border-image” class within the “Image CSS Class” field.
Note: Do not use a dot when specifying the Image CSS Class.
The image now had a border around it making the post a bit more readable.
- The WP Image Borders plugin only allows you to define a single image border style for your entire blog site. Unfortunately it can’t be used to define multiple styles.
- The border around the image will not be shown when you are editing your post. It will appear when you try to preview it.
- If you like to edit HTML by hand, then the <img> tag will look something like the following:
<img class="border-image alignnone wp-image-13 size-full" src="Logo.png" alt="Company Logo" width="678" height="680" />