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.
- See more WordPress tips on RAWinfopages
- 5 image compression utilities for the Apple Mac – optimize web images
- Squash images with Squoosh to improve website performance
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.
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.
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.
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.
When the post is published or you click the Preview button at the top, the image is displayed with the border you specified.
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.
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.
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.
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.
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.
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.
