If you want to add a border color around your images in your WordPress blog posts, follow this quick tutorial.
Two things 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’.
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.
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.
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 a 3-pixel width, and 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, and 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 goes well, it should look like the border around this image, of course, with your own color choice:
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!
