How to Add a Border Around an Image for a WordPress Site

26303484702_501ac4b5a1_zYou published your WordPress post, but you feel as if your post’s image doesn’t look like as you imagined. It seems like a border is missing around it. Well, you may add a border around your WordPress post’s image easily. All you have to do is to add a Cascading Style Sheets (CSS) snippet (piece of code) into your HTML page.

It is actually a straightforward process. Just follow the steps explained in detail below. I assume that you have a basic understanding about CSS. If you don’t, no worries ! Just read this post as a quick starter. I guarantee you will be in a good shape shortly.

Step 1 :

Click Posts / Add New

Write your post in the visual mode of  WordPress text editor and add your chosen image as usual (Click Add Media)

Step 2 :

After you add your image into your post, turn to “Text” mode in your WordPress editor. Look at the code and find <img> tag. This HTML tag identifies that image and holds attributes about it like :  width, height, alignment etc.

Let’s see an example : Our sample image and the piece of code that identifies it look like this;

<img src="http://www.pressedword.com/wp-content/uploads/2016/10/26-1-150x150.jpg" width="164" height="164" />

Step 3 :

Now we will add the following CSS style snippet inside of the <img> tag;

style="border:1px solid #9a9899; padding:1px; margin:5px;"

The final code and the image will look like this;

<img src="http://www.pressedword.com/wp-content/uploads/2016/10/26-1-150x150.jpg" width="164" height="164" style="border:3px solid #9a9899; padding:1px; margin:5px;" />

This CSS style will add a grey border around your sample image. Feel free to use it in your website (I consent you to use it without my copyright restrictions) but do not forget to change the src property (put your own image address).

Step 4 :

Of course the values which I set for the attributes aren’t written in stone. You can adjust them to fit your needs. Let’s see how to make these modifications;

Thickness of the border : You can change the thickness of the border by changing this attribute : border : 3px (if you want a thicker border around your image just increase the number, if you want a lean border then decrease it)

Style of the border :  If you don’t want a solid border around your image, change it to dotted, dashed or double. The attribute values reveal what they promise. If you choose “dotted”, you will end up with a dotted line.

Padding & Margin : You can arrange the amount of padding and margin around your image by changing the pixel values of these attributes.

Color : By changing this value (#9a9899;) you can control the color of the border.

Let’s change the thickness, border type, color, padding & margin and see what is happening;

<img src="http://www.pressedword.com/wp-content/uploads/2016/10/26-1-150x150.jpg" width="164" height="164" style="border:8px double #ee1127; padding:9px; margin:8px;"

As you may have noticed, we increased the border thickness from 3px to 8 px, changed the border style from solid to double, changed the border color from grey to red and finally changed the padding / margin values to higher values. The resulting image has an entirely different border scheme.

Tolga Ayan

Writes articles about WordPress, CSS & Related Web Technologies. Resident of Alpharetta, GA.

We'll be glad to hear your comments !