Would you need to add a border around your pictures in WordPress? Lately, one of our customers asked us to get a simple method to add border around an image in WordPress. As you may use CSS, it is confusing for novices. In the following guide, we'll show you a simple means to add picture edge in WordPress without editing any HTML or CSS code.

Method 1: With a Plugin to Insert Image Border in WordPress

This technique is for novices who don't want to edit any HTML or CSS. First thing you have to do is set up and activate the WP Picture Module plugin. Upon activation, then you will need to go to Settings" WP Picture Module to configure the plugin configurations.

The very first section from the plugin settings permits you to target pictures. You can add borders to all pictures on your WordPress posts by checking the box near 'Insert borders to all pictures in blog articles' alternative.

We'll explain to you how you can add a CSS class to a particular picture later in this report. Right you can now place anything to the CSS course like .border-image.

The next segment in the plugin configurations permits you to personalize border settings.

The previous segment on the preferences page lets you add drop shadows to your images. It's possible to input a vertical and horizontal space, blur and disperse radius, in addition to box shadow shade.

Do not forget to click the Save Changes button to store your plugin configurations.

If you picked the first choice 'Insert borders to all pictures in blog articles', then you don't have to do anything else.

You need to see picture borders on your entire blog post graphics.

However, if you picked the second option to simply show border for certain pictures, then you will need to stick to the following step.

Adding CSS Class into a Picture in WordPress

If you merely want to add borders around chosen pictures, then you'll have to inform WordPress which pictures should have boundaries. You can achieve it by adding a CSS class to pictures that require boundaries.

Just upload your picture and add it into your article. After adding the picture click on it at the photo editor and click the edit button from your toolbar.

This may bring up picture editing popup revealing your picture details. You have to click the Advanced Options to enlarge this, then put in your picture's css class.


Tip: this can be .border-image since we picked that in our plugin configurations.

Then click the upgrade button to store and upgrade picture settings. That is all, your picture will now have an extra class. As you're using WP Image Borders plugin, a boundary is going to appear with this picture.

Adding picture edges using CSS/HTML is a much quicker and faster way to get borders around your images in WordPress. There are a lot of approaches that you can achieve so, and we'll show you all of these. You are able to pick whatever works best for you personally.

Adding Borders Employing In-line Designs in WordPress

When you've uploaded and added your image into a WordPress place, change to the text editor. You may see HTML code to your picture.

You can easily add CSS design from the HTML code such as this:

Don't hesitate to modify the border thickness, color, padding, and margin to your needs.

If you would like to permanently add borders to all pictures on your WordPress blog posts and pages, then it is possible to add CSS directly on your WordPress theme or kid motif.

Most WordPress topics currently have these design rules set in the theme's stylesheet that's typically style.css file. You are able to alter the existing CSS, or you'll be able to add your own CSS at a kid motif.

WordPress adds default picture classes to all pictures. To be able to be certain images on your posts/pages have a picture edge, you want to target these courses.

If you would like to just use picture borders if you want them, then it is possible to add CSS course to your pictures (see above). Insert styling principles for this CSS course on your subject or kid motif.

Hopefully this article enables you to insert picture border on your WordPress site pictures. You might also need to see our guide on the best way best to save pictures optimized for the internet to accelerate your WordPress website.