Are you creating a tutorial with some screenshot images? You have already written your WordPress post and added some screenshot images to it? Or, you have an article with more images that would look better if the images had borders around them? And you don’t want to do the tedious work again of changing all images manually one by one in a graphical program?

If you face this problem and you don’t want to spend more time on adding the borders to your images manually (e.g. by adding the stroke effect to your layers in Photoshop), there is an easy turnaround for this. I will explain below how it works.

So, the first thing that you need to do is to add a custom CSS class to your images. In my case, I will add the class obr. Then my HTML code for an image, e.g. in this article, will look the following way (notice the obr code at the end):

<img src=”https://divitheme.net/wp-content/uploads/2021/04/add-border-images.png” width=”600″ height=”300″ alt=”Add Border to Images CSS” class=”wp-image-3199 aligncenter size-full obr” />

You will need to add the obr code (or whatever class you decide to use) to all images on which you want the border to be added. If you have some images on which you don’t need a border, you don’t have to add it to their code.

And the second thing that you need to do is to add the following custom CSS code to your Divi Theme Options Custom CSS field or to your child theme’s stylesheet file:

.obr { border:1px solid #d8d8d8; }

Note: You may also add this code only to an individual Divi Layout’s custom CSS code – in case you don’t need to apply this to your whole website but only to a few particular page(s).

Don’t forget to change the HEX color code with your desired color. And you may also like to increase the width of the border by changing the 1px value to e.g. 3px.

There you have it. I hope you will find this quick CSS tip helpful. Also note that this works with other WordPress themes as well, not just with Divi.