Because you are here, you are probably trying to figure out how to add image border in WordPress. To begin with, let me explain shortly, how you could benefit by adding borders to images.
I personally think that properly designed image borders give a website cleaner look.
Especially if you use a lot of screenshots in your articles. These cutouts look much cleaner with borders around them.
That’s why I prefer using borders. And that’s how you could benefit from using them.
Therefore, what I propose to do here is to provide a few simple methods to add borders to images.
In this post you will learn:
- What plugins you can use to add borders to images
- How to add borders to all images
- How to add borders to selected images
- How to remove borders from selected images
[Sidebar: If you want to learn about my #1 work-at-home opportunity, check out THIS! You’re gonna like this (Yes, I am using it since 2013).]
Your Problem Is This:
Life in times of WordPress 3.8 and below was easy indeed. Image border options were deep in the core of WordPress. All you needed to do was clicking on the image, hit edit and choose what kind of border you wanted to add.
However, with the WordPress 3.9, everything changed. Suddenly, the border options had been removed these popular options from the core of the WordPress. This turned many WordPress users red-hot mad, of course.
However, there is a sound logic behind that move.
Namely, these image options added a piece of code into the inline (I’ll write more about it later).
Obviously, more code makes the whole thing slower and more vulnerable to mistakes. That’s the reason people in WordPress finally decided oust the already coded border options and opt use CSS classes instead (more about this later).
Which brings us to the question – How to add borders to images? That’s what I want to show you now. Keep reading.
How to Add Image Border in WordPress
If you want to use plugins, I found two that add border to the images:
1. Advanced Image Styles
The maker of the plugin says that it requires WordPress 3.9 or higher and is compatible up to WordPress 4.4.
However, with WordPress 4.6 I could not make it work. Maybe there are some incompatibility problems with my other plugins; I don’t know. You may want to try, maybe it works for you.
2. WP Image Borders
This plugin Requires WP 3.0.1 or higher and is compatible up to WP 4.2.9.
However, it works fine with WP 4.6 and WP 4.7. So I am happy with it. In fact, I am using it.
How to Add Borders to All Images
A. Do it Manually
It might look ridiculous now but yes – I did it manually. You know why? Because I did not know any better way adding them. And somehow, I did not have an idea to search for more efficient options. Therefore, that’s what I did.
Before uploading images, I edited them in Paint.net (Photoshop alternative) and added borders manually.
I still did it to get the results I wanted. Now, fortunately, I have found better ways, and I am going to show you the exact steps on doing it. So keep reading.
Therefore, I don’t recommend adding borders manually.
B. How to Add Image Border Using a Plugin
Go to WP Image Borders download page and hit “download.”
Log in to your WordPress dashboard. Then, on the left-hand side menu click on Plugins → Add new → Upload plugin → Choose file. In your computer navigate to the folder where you downloaded the plugin, then hit “Open”.
Click on the “Install now” button:
After the installation process of the plugin is finished, click on the “Activate plugin” link. Now the plugin is up and running.
On the left-handed menu, head over to Settings → WP Image Borders.
Check “Add borders to all images in blog posts.”
Let’s say I want to add a green, solid, and 3 pixels wide border to all images. That’s how I do it:
That’s all you need to change. Then scroll down and click on “Save Changes. ”
See the results:
Feel free to change the border style, width, and color as you like best.
C. How to Add Border CSS
Log in to your WordPress dashboard. On the left-hand side, menu navigate to Appearance → Editor. It will open your theme’s Stylesheet (style.css).
Your Stylesheet probably differs from mine you should be able to find something like this:
You don’t need to understand the code. Just copy and paste the piece of code into custom.css, then modify it as follows:
As you see, I added the same border style into three different places. This is because you can align image left, right, and center:
Apparently, in each case, I want that there is a border around the picture.
Now, coming to that piece of code,
- 3px – width of the border;
- solid – border type;
- #C0C0C0 – the hex code of the light gray shade.
Again, feel free to change the border width, type, and color to your own needs.
How to Add Border to Selected Images
Maybe you say, “But I don’t want to add borders to all images in my posts and pages. I want to add borders only to some selected images. What then?”
There are different options for doing this:
A. Adding Image Border Manually
You can use the same manual technique that I described above. Only this time, you have much less work to do.
B. Adding Image Border Using In-line Styles in WordPress
Obviously, this method is manual too. Only this time you don’t edit the image but add CSS style in the HTML code.
Upload and insert your image into a WordPress post.
Switch to the WordPress text editor:
Now you will see your the HTML code for your image. It’s something like this (starting with “img“):
Now it is easy to add CSS style to that picture:
Rinse and Repeat. Add a code to every image you want to have a border.
However, according to today’s web standards, this is not the proper way to do this. Technically it is correct, of course, and you can do it if you want. But please remember, lots of inline code slow your site down and can cause problems too (a small mistype here or there, and it won’t work).
Therefore, a much better way to do it is to create a CSS class and pulling it from your global stylesheet. Which brings us the next topic:
C. Adding CSS Class to an Image in WordPress
Install the WP Image Borders plugin as described at the beginning of this post.
On the left-hand WordPress menu, head over to Settings – WP Image Borders.
Uncheck “Add borders to all images in posts.”
To create a new CSS class, give it a name (Note! It must start with period “.”) For example: “.green-border”
See! There is a period before the name:
Customize your border by following the instructions given above (“How to Add Image Border Using a Plugin”). Then scroll down and hit “Save Changes.” This way you have created a new CSS class for image borders.
To apply that newly created border class to selected images, please do the following:
In the WordPress visual editor click on the image that you want to have a border. After selecting it click on the Edit button in the toolbar:
In the “Image Details” click on “Advanced Options,” then type in the name you gave your newly created CSS class.
Click on the “Update” button. That’s it.
Rinse and Repeat.
Finally, don’t forget to update your post or page. Or the changes won’t show up on your site.
How to Remove Border From Selected Images
This is a polar opposite situation to the previous one. Instead of adding borders to only selected images, what you want is that most of the images HAVE borders and only some of them don’t.
That’s what happened to me. I applied one of the techniques described above to add borders to all images. I was happy.
Until I designed a cute button and inserted it in my post. That’s what happened:
See! It’s ugly. Therefore, how to remove borders from selected images?
I did this way:
I added borders to all images by using Custom CSS as described above.
To remove borders from selected images I installed the WP Image Borders plugin and created a new CSS class for those images that I wanted without borders (this method too is described above):
See! I give it a name “.noborder” (with the period on the front of it). And I set Border width 0 (zero). After that, border color does not matter anymore.
I head over to my post, click on the image that I want without a border. Then click on “Edit” button and tie the image with the newly created CSS class “noborder” (this time without a period, though):
Update the Image Details. Update the post and voila:
Rinse and Repeat.
That’s it. The only images without border are the ones with image CSS class “noborder.”
Before you Go:
Was this article helpful? Did you learn how to add image border in WordPress? And do you know any other (more efficient) method to add or remove borders? Please let me know by leaving a comment into the comment box below. Thank you!