How to Add Border Around Image in WordPress

If you are looking for a way to style the images of your website by giving borders, then this article will show you all the possible ways you can add borders to any image in WordPress site. The most reliable and controlled way to add border in WordPress is from CSS and HTML. But if you are unknown to add HTML and CSS codes then adding border in image using codes can be complex. This article shows how to add border around image in WordPress. By default when you add any image to your WordPress site, you get a plain image without any border and styling as shown below.
Let us add some border to the image. But first of all you need to name your image giving it class or ID. Same class name can be given to multiple images whereas ID is given only once to a particular image. We will be using class since same class name can be used multiple times. Class name will be needed in our both plugin method and coding method. So let us learn how to give class name first.

How to add CSS Class to images?

Here are the simple steps for giving class name to image.
1. When you are adding new post or editing new post simply select the image in the post in the visual editor.

2. Click on the edit button on the toolbar just above the image.

3. This will show the image editing options.Click on Advanced Options to expand it.

4. Give your image a CSS class and click in update to save. In my image I have given the class name ‘cool-border’.
Now CSS class is added to the image.

How to Add Border Around Image in WordPress

Method #1 : Using Plugin to Add Border

If you don’t want to mess with complex code, then using a plugin is the easiest way for you to add border in any image. Here we will be using WP Image Borders plugin to add borders. Follow these steps to install and use the WP Image Borders.

Log in to admin dashboard. Go to Plugins > Add New
In the Add plugins page search for keywords like image border or WP Image Border.
Install and activate WP Image Border plugin that will look like the item shown in picture.

1. Go to Settings > WP Image Borders to reach the plugins setting page.
5. In the setting page give the class name of the particular image in the Additional CSS classes. Similarly, you must give a border width, border style and color of the border for border to appear.
The border radius is optional. If you want shadow in the image you can add it in the setting page which is also optional. There are various styles of border like dotted, dash, double etc. You can experiment border styles with various colors and width.
After saving the setting you should see a nice border around image.

One more thing, if you want similar kind of border in all of your images you can select the ‘Add borders to all images in blog posts’ checkbox in the top of the setting.

Method# 2: Using HTML & CSS to add Image Borders in WordPress

If you know some basic HTML/CSS , you can use some simple CSS code to add borders. First you have to give the CSS class to the particular image using the method specified above. Follow these steps to add borders to the image through CSS/HTML.

Also Read: How to Add an HTML Sitemap in WordPress

1. Open your theme’s CSS file. The default CSS file of WordPress is style.css. You can also open the CSS file from Admin Dashboard through Appearance > Editors.
2. Add the following CSS lines in CSS file targeting the specific class that we added earlier.

.cool-border{
             border-width: 5px
             border-style: solid;
             border-color: #999;
             }

There are various other border-styles apart from solid that you can use. Dotted,dashed,double,groove, ridge, inset and outset are few other border styles you can try. The above code can also be written in short hand form like this.

.cool-border{
             border: 5px solid #999;
             }

Now lets put some padding to create some space between border and image.

.cool-border{
             border: 5px solid #999;
             padding:5px;
             }

After you update the CSS file, you should see a nice looking border with padding.
Note:If the border didn’t appear, you can add ‘!important’ in the border to make it overwrite any previous CSS.

.cool-border{
             border:5px solid #999 !important;
             padding:5px;
             }

Now if you want to display the same border to all the images of the website. You can target the ‘img’ selecter instead of class selector.

img{
    border:5px solid #999 !important;
    padding:5px;
    }

Method #3: Adding Border with Inline Style

If surprisingly non of the above process work you can try inline styles which is the fastest way for adding border to particular image. Follow these steps.
1. Go to the post where image is located through editor. Switch to text editor

2. Find the HTML code for your image which looks something like this:

3. Add the inline border code in the img tag in the way given below.

style=”border: 1px solid #999; padding:5px;”

Now save the file, You will see the new border appearing in the image. We hope the article was helpful and helped you to add borders to images of your website.

Bio
Latest Posts

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.