How to Add Image Border in WordPress (fast)

How to Add Image Border in WordPress (fast)

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.

See yourself:

Screenshots with borders look cleaner

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 opportunitycheck out THIS! You’re gonna like this (Yes, I am using it since 2013).]

First stop:

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 Wordpress plugin
  2. WP Image Borders WordPress plugin

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.

Boring? Yes.

Time-wasting? Yes.

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.

There is a downside effect of this method, though. If one day you decide to change your website style and want to get rid of the borders, there is no other option doing that than cropping them manually.

Therefore, I don’t recommend adding borders manually.

B. How to Add Image Border Using a Plugin

Step 1

Go to WP Image Borders download page and hit “download.”

Step 2

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”.

Step 3

Click on the “Install now” button:

AFter uplaoding the plugin file, install it.

Step 4

After the installation process of the plugin is finished, click on the “Activate plugin” link. Now the plugin is up and running.

Step 5

On the left-handed menu, head over to Settings → WP Image Borders.

Step 6

Check “Add borders to all images in blog posts.”

add borders to all images

Step 7

Let’s say I want to add a green, solid, and 3 pixels wide border to all images. That’s how I do it:

image border customizing options

That’s all you need to change. Then scroll down and click on “Save Changes. ”

See the results:

green solid border around images

Feel free to change the border style, width, and color as you like best.

C. How to Add Border CSS

If you can handle CSS you may want to use this method. That way you burden your site with fewer plugins. However, if CSS is confusing for you better use a plugin as described above.

Step 1

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).

Note! If you don’t know how to operate with Stylesheet (style.css) and  Custom.css, please see the instructions here. I give you step-by-step guide how to copy and paste CSS code from style.css into custom.css

Onward.

Your Stylesheet probably differs from mine you should be able to find something like this:

CSS code in WordPress stylesheet that shows image alignement

Step 2

You don’t need to understand the code. Just copy and paste the piece of code into custom.css, then modify it as follows:

Adding borders in CSS

As you see, I added the same border style into three different places. This is because you can align image left, right, and center:

Image align options in WordPress

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.

Step 1

Upload and insert your image into a WordPress post.

Step 2

Switch to the WordPress text editor:

switch to wordpress text editor

Now you will see your the HTML code for your image. It’s something like this (starting with “img“):

That's how an image looks in a html mode

Now it is easy to add CSS style to that picture:

adding CSS style to the HTML code

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

Step 1

Install the WP Image Borders plugin as described at the beginning of this post.

Step 2

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:

adding css style to stylesheet

Step 3

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:

Step 4

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:

How to edit an image in WordPress visual editor

Step 5

In the “Image Details” click on “Advanced Options,” then type in the name you gave your newly created CSS class.

Note! NO period in the beginning!

How to add image CSS class in WordPress

Step 6

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:

Buttons don't need borders around them.

See! It’s ugly. Therefore, how to remove borders from selected images?

I did this way:

Step 1

I added borders to all images by using Custom CSS as described above.

Step 2

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):

How to remove border from selected images using WP Image Borders plugin

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.

Step 3

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):

apply css class to an image in wordpress

Step 4

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.”

how to remove a border from selected images


 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!

Related articles:

 

Leave a Reply

Your email address will not be published. Required fields are marked *