Home » Add border to Image in WordPress Website without plugin

Add border to Image in WordPress Website without plugin

In this article, I am gonna tell you how you can Add border to Image in WordPress Website without plugin.
The use of adding a border to an image arrives when you have a white background color of an image and your theme background color is also white the user will not differentiate whether is it a text or image. For make it clear we can add a border of a different color (rather than white). Or you can also Add border to Image in WordPress Website without plugin for making it look cool.

WITHOUT BORDER

 

remove tags display

WITH BORDER

remove tags display

Add border to Image in WordPress Website without plugin

1. Go to the post and Add image to the post.

Add border to Image in WordPress Website without plugin

2. Then go to Text editor from Visual editor. ( You can find it on top right corner).

3. Then you will find the HTML code for the image in Text Editor.
Code looks like

<img class=”aligncenter wp-image-2038 size-medium” src=”http://www.hackchefs.com/wp-content/uploads/2017/07/Rose-1-300×242.jpg” alt=”” width=”300″ height=”242″ />

4. Add style=”border: 3px solid #D8D8D8;” in the end of code then it will look like

<img class=”aligncenter wp-image-2038 size-medium” src=”http://www.hackchefs.com/wp-content/uploads/2017/07/Rose-1-300×242.jpg” alt=”” width=”300″ height=”242″style=”border: 3px solid #D8D8D8;” />

here 3px is the width of border, solid is the type of border and #D8D8D8 is the color of the bprder. you can learn more about border and make it as you want, click here 

After adding the codes, Your image will look like

You can also make different styles of a border.

1. For dotted border of black color.
Add style=”border: 3px dotted black;”

2.  Add style=”border: 3px double black;”

Here You can learn more about the border, its type, and border-radius etc.

Add Border to WordPress Website For All Images

If you want to add border automatically for all images then you have to write this code to your CSS file. Go to Appearance<Editor<CSS then write

img{
          border: 3px solid #D8D8D8;

}

You can change the border color, type and width according to your desire. I have already told above in the article.

Azzu

My name is Azad Ansari. I am from Delhi. I have completed my bachelor degree in computer science engineering. I have interest in technology and blogging that's why I have started this blog.

try