What's WP
Our everything is about WordPress - best choice of WordPress users!
Easy Steps to Add Border to Image in WordPress

Easy Steps to Add Border to Image in WordPress

A border is commonly used as a decoration, which enables a professional and unique looking for all images shown on the website. A large number of webmasters accept this great image optimization method and wish to put it into practice. This guide briefs the easy steps to add a border to an image in WordPress site. A plugin is selected here to simply matters, namely, WP Image Borders.

Install & Activate WP Image Borders Plugin

The WP Image Borders plugin enables an easy manner to add the stylish border to an image. Users can feel free to adjust the border width, change colors or add shadows to images in the posts. Go to WP-admin > Plugins > Add New and install this plugin. The option “WP Image Borders” is shown under Settings.

WP Image Borders Plugin

Add Borders to All Images in Blog Posts

Go to Settings > WP Image Borders and a list of settings is available for you to customize the image borders. Before everything, target the images you are going to add borders to. Check the option “Add borders to all images in blog posts”, which adds borders to all images automatically. Leave the “Additional CSS Classes” field and that will be mentioned in the next part.

Add Borders to All Images

And then, customize the image borders, in terms of border style, border width, border radius and border color. Modify all settings as you need. Make sure that the image with border should be well matched with the web design. The border color should differ from the color of your website background.

Customize Image Borders

The Add Drop Shadows to Images section is where to add drop shadows to all images. Set the horizontal & vertical distance, blur & spread radius and box shadow color as needed. That should be in pixels. If there is no need to add drop shadow to each image, leave zero to all settings and click “Save Changes”.

Add Drop Shadow to Images

Open any posts as you want and check if the images are all surrounded by borders. By following the above-mentioned guide, the image border should be like the sample as below. If there is something improper with the border, go back to the settings page and modify the settings for image border customization.

Add Border to Image Before & After

Add Border to a Specific Image

If there is no need to add borders to all images, you can add a border to a specific image by using CSS class. Go back to Settings > WP Image Borders > Target Images and enter a CSS class to the Additional CSS Classes field. For instance, we type .add-border-to-image in this field. Customize the rest settings if needed and save all changes. Before doing so, make sure that you have unchecked the option “Add borders to all images in blog posts”.

Add Additional CSS Class

Open the post including an image that you are going to add a border to. Switch to the Visual editor and that enables you to view the image intuitively. Click this image to expand an array of settings for image customization. Select the “Edit” option and click it to access to the image edit page.

Edit Specific Image

The Image Details page pops up and this is where to customize the details of this image. Expand the Advanced Options section and enter the CSS class you’ve set just now in the Image CSS Class field. And then, update the settings and view this post on the front-end. The image would come with a border as planned.

In addition to WP Image Borders, there are some alternatives for this plugin are available for users, among which the Advanced Image Style is recommended here. This is also an easy-to-use plugin used to adjust image border and margin. Users just need to customize all settings in the visual editor.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.


Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *