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.
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.
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.
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”.
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 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”.
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.
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.