Add a Border Color to Your Images in WordPress

If you want to add a border color around your images in your WordPress blog posts follow this quick tutorial.

Two thing you will need. An image of course, and some basic understanding of CSS.

Let’s get going!

First, add your image to your blog post. Click the blue plus button in the top toolbar of your post. If you don’t see the image block available search for ‘Image’.

add the Gutenberg image block to the blog post

Once you find the image block, click the image icon to add it to your blog post. Adjust the size and alignment if necessary. My example image is below.

Strategic Marketing Solutions

Add Some Class to Your Image

Once your image is properly formatted, the next step is to add a CSS class. To add a class to your image, you click on the image in your post. This will bring up the block styling for your image on the right side of your post. At the very bottom, you will see the word Advanced. Click on the word Advanced to reveal several fields. The last field in the list is the Additional CSS class(es). Type in a CSS name. It can be any name you want but I recommend a name that is relevant to the task. Also, you cannot have spaces if you use more than one word for your name. Instead of a space between words use an underline or hyphen. For example, my CSS class name is image_border.

add additional CSS class to the Gutenberg image block

Set up the CSS

If you haven’t already done so, save your draft. Under the Appearance tab in the WordPress admin area there is the Customize button option, click it. Hint, right-click on the Customize button and select open in a new tab. With the customize page open you have your home page on the right and the customize options on your left.

From the left menu choices, click Additional CSS. In the open area add the following code:

.image_border img{
	border: 3px solid green;

Let me break down what the code is doing. First the ‘.’ signifies that the code is a class. Immediately following that is the class name. After the class name is what the class is modifying. In this case, it is the IMG HTML tag. In between the two brackets is what happens to the IMG tag – give the border 3-pixel width, make it solid, and green in color.

Your image border color can be any color you’d like. The border doesn’t have to be solid. There is dotted or dashed for example. You can add more advanced color options by applying hexadecimal color codes. These color codes contain six numbers or letters prefaced with a hashtag sign (#). Here is a great resource to look up color codes.

View the Color Changes

After you’ve added the CSS code, click the blue Publish button. Go back to your post, add your content and additional images. You will not see the border color in the Gutenberg editor. You can either preview or publish your post to view the color around the edges of your images. If everything went well it should look like the border around this image of course with your own color choice:

SMS image with green border color

There you go!

If you have any questions or if you got stuck along the way post in the comments below.

More Content for you to enjoy!

Leave a Reply

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