How to add a border to images in WordPress the easy way

Make your photos and images stand out by adding a border

Web design tips - how to add borders to images in WordPress

Most images on web pages are borderless, but on some occasions you may want a border, perhaps to separate an image from the background. Let’s see how to add borders to images in WordPress.

Most photos and illustrations stand out on web pages all on their own, but if the background is the same colour as part of the image, it looks odd. For example, a scan of a document where the white paper blends into the white web page background, or a dark photo, perhaps at night, merges into a web page with a dark or black background.

Sometimes a photo simply looks better with a border which mimics the border you would have if it was a printedphoto.

How do you add borders to images on web pages?

Use a WordPress plugin

There is more than one way to do this and there is a plugin called WP Image Borders that aims to make it easy to add one to an image.. However, it was last updated four years ago and it looks like it has been abandoned.

It is not recommended that you use old plugins, but you can find it in the WordPress plugins library if you want. For speed and security, it is best to keep plugins to a minimum, so if there is another way to achieve something, then do that instead. In the case of borders, there is an alternative.

Insert CSS into image tags

Back in the early days of web development, to add a border to an image you just had to insert border=”1″ into an <img…> tag. It might still work in very old versions of WordPress, but it did not work when I tried it in the latest version.

The modern method of drawing borders around objects is to use CSS, which is a way to define the style of pretty much anything on a web page. There are three parameters:

  • border-width: 1px, 2 px, 3px…10px and so on
  • border-style: solid, dotted, dashed, double, groove, ridge, inset, outset
  • border-color: red, green, blue, black and so on, or #ff8000 (RGB hex values – some photo editors show the code for colors)

The following code added to an <img…> tag will create a border that is 5 pixels wide, solid and colored red.:

style=”border-width: 5px; border-style: solid; border-color: red;”

A quick way to write this is:

style=”border: 5px solid red;”

Let’s see a worked example of this. Open a WordPress post or create a new one and add an image to it. Click the image in the post editor to select it, then go to the three dots menu in the top right corner and select Code Editor.

Switch to the code editor view in WordPress

Find the img tag, which is in a wp:image block, and insert the style after the img like this. Of course, you can use a different width and color if you prefer.

Add a border to an image using CSS styles

Switch back to the visual editor using the three dots menu in the top right corner and… oops! WordPress does not like you messing with the code. It asks if you want to resolve the problem, which deletes it, or convert the block to HTML. Click the Convert to HTML button.

WordPress code warning in the editor

In the WordPress block editor is now some code. Don’t worry, it is OK and you can just ignore it and continue adding text and image blocks to your post.

HTML code in the WordPress block editor

When the post is published or you click the Preview button at the top, the image is displayed with the border you specified.

Thumbs up from the computer guy

The code looks messy in the block editor, but it works on the page when published and the image has a border with the style specified.

Define a CSS style for borders

A variation of this is to define a CSS style with a bit of code. In WordPress, go to Appearance > Customize > Additional CSS and enter the following code:

.border-image {
border: 3px solid black;
}

By all means vary the style, so make it thicker or thinner, solid or dashed, red, green or whatever colour you want.

Images borders CSS code in the WordPress customizer

Now when you want to add a border to an image, select the image and in the image settings in the right-hand panel, expand the Advanced section and add border-image.

Adding custom CSS code to an image in WordPress

This is much simpler, it does not require you to edit the code, and WordPress likes it and does not display a warning like before. The result is an image with a border.

Image border applied by CSS in WordPress

Actually, that is not quite right and it seems to have added the border to the whole block rather than just the image – there is empty space on the right. It would look OK if the image was either full width or centered.

Add borders in a photo editor

Some photo editors make it very easy to add a border to an image and they have a variety of fancy or plain borders. In this example, I use the free GIMP photo editor (Mac or PC) and it takes just a few seconds to add a border as you are preparing an image for a website.

Set the background color to the desired border color using the rightmost color chip in the tools window. Go to the Image menu and select Canvas Size.

Set the canvas size in the GIMP photo editor

If you want a 1-pixel border, increase the width and height by 2 pixels, if you want a 4-pixel border, make the image 8 pixels bigger – there is a border each side, remember. Click the Center button to make the borders even, top and bottom, left and right. Then click the Resize button at the bottom.

Set the canvas size in the GIMP photo editor

You might want to flatten the image layers if you are saving a PNG file, but if you save it as a JPG, it will be flattened anyway as JPEGs don’t have layers.

The advantage of this method is simplicity. It is quick and easy to do and there is no need for any HTML code or CSS on the pages. Just remember to add a border to images that need them as you prepare them in your photo editor.


What's next?

Affiliate links

About Roland Waddilove 278 Articles
Roland Waddilove has been writing about computers, software and gadgets for many years. He has been editor of several computer magazines, but these days is a freelance writer.