Can you Add a Border to your WordPress Images?

WordPress allows you to do quite a bit with your images. When you insert the image into a page or post, you can choose a size, give the image a title, add an ALT tag and even link it to a URL. However, adding a border to your image is a bit different. Here’s how you can add borders to any images you want in WordPress hosting.

Using the WP Image Borders Plugin

The easiest way for beginners or anybody else using WordPress to add a border to an image is with the WP Image Borders plugin. This plugin makes it easy to create the border you prefer. After you install the plugin, you will find it listed under the Settings menu.

WPImageBorders

This plugin will allow you to set up borders for all of your images. Just check the “add borders to all images in blog posts” option and the plugin will add the border you choose to every image you have.

If you don’t want to add borders to each and every image you have, you can use the CSS classes to target specific images. This is done by creating a CSS class, such as .border-image.

WPImageBordersSettings

Within the settings section of the plugin, you will be able to customize the border settings. You can choose the color, style, width and even the radius. This allows you to decide how thick you want the border and how you would like it to look around each image.

You will also have the option to add a drop shadow to your images. This can be one with vertical or horizontal distance, spread radius or even blur. You will also have the ability to choose the box shadow color. If you’re not interested in creating a drop shadow, just leave these settings blank.

After you have selected your options, you will want to save your changes. Now you should see an image border on all of your images.

Adding a CSS Class to Your WordPress Image

If you don’t want a border on each and every image on your WordPress website, you can use a CSS class to put the border on specific images. This is done by editing the image to add the CSS class to the image.

Start by adding the image to your post, as you normally would. Then, click in the edit option in the visual editor for the image. When you scroll down, you will see an Advanced Options section.

AddCSSClassToImage

 

 

 

 

 

You will add the CSS class you have specified in the WP Image Borders plugin to the Image CSS Class section. This tells your WordPress site to only put a border around the images with this CSS class assigned to them.

Using HTML to Add Borders to Images in WordPress

If you don’t want to use a plugin, you can use HTML to add a border to your images. You will need to have some knowledge of HTML code to make this method work.

After you have uploaded the image you want to use and inserted into your WordPress post, you will need to switch to the text editor. From here, you will need to find the HTML code for the image. Add the following code to give it a border:

  • style=”border:4px solid #ffffff; padding:4px; margin:4px

This code will give you a border on any image you want. You can change the size by adjusting the numbers up and down and you can change the color by using a different hex code in place of #ffffff.

If you want to add a border to your images in WordPress, you can use the plugin or the HTML method to do so. Both methods are very easy to use and will allow you to customize the border to fit the image you are working with.

2017-12-03T15:37:28-08:00 August 13th, 2015|

Leave a Reply