TOOLTIKI Lovable tool, really free
Image Edit

Add a border to an image

Edited in your browser · the file is never uploaded

Local · the canvas grows, nothing is covered
Advertisement
320 × 100

Adds a solid border of any width and colour around an image. The border is added outside the picture, so nothing is covered up.

How to add a border to an image

1 Choose an image.
2 Set the border width and colour.
3 Save the result.

The border grows the canvas rather than painting over the edges, so the whole original picture survives — a border drawn inside the frame would cover a strip of the image, which is almost never what people want and is what a naive implementation does.

The practical use most people have is padding a photo to a required ratio without cropping it. A tall photo that must be square for a grid can take white bars at the sides instead of losing its top and bottom, which is the same trick as letterboxing a film. Bear in mind that the border becomes part of the image: a platform that crops to a circle will crop through the border, and a dark-mode reader will see a white frame that does not belong.

On colour choice: matching the border to the background it will sit on makes it invisible and is the point when you are padding for a ratio. A contrasting border is a design decision and works best when it is either much lighter or much darker than the photo’s edges — a mid-grey border against a mid-grey photo edge reads as a mistake.

The output is PNG so the border colour is exact. A JPEG would introduce compression artefacts along the hard edge between border and photo, which is exactly the kind of boundary JPEG handles worst.

Questions

No. The canvas is grown and the border sits outside the picture, so nothing is hidden.

MDN — CanvasRenderingContext2D.drawImage()MDN — HTMLCanvasElement.toBlob()
Advertisement
300 × 250
Was this tool any good?
INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING