Add Border to Image

How it is calculated

In short: The tool puts an even border around your photo. You give the width as a percentage of the shorter side, choose any color or make the border see-through. Everything runs in the browser, without an upload.

How it works

1. Drag in an image, choose one or paste it with Ctrl + V.
2. Set border width and color. The preview updates at once.
3. Pick a style: “Border around the image” enlarges the file, “Border on the image” keeps the size and covers the image edge.
4. Optionally add instant-photo style or rounded corners, then save.

The options

• Border width: in percent of the shorter side, so the same value looks alike on every image.
• Instant-photo style: three times as wide at the bottom as on the other sides, like an instant photo.
• Rounded corners: cuts off the corners of the result. That needs transparency, so the tool then saves as PNG.
• Transparent border: leaves the border see-through, handy as spacing for collages. Only PNG and WebP support transparency, JPG fills it with white.

Honest limits

• The border is a single color. There are no patterns, gradients or shadows.
• With “Border on the image”, the image edge under the border is lost.
• EXIF data is not kept. Very large images are reduced to the browser limit; on iPhone and iPad that is 16.7 megapixels.

Privacy

The image is processed only in your browser and is not uploaded.

Frequently asked questions

Sources and legal basis

• W3C – Compositing and Blending Level 1: Porter-Duff destination-in and destination-out
• MDN – CanvasRenderingContext2D.globalCompositeOperation
• MDN – CanvasRenderingContext2D.arcTo() (rounded corners)
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()
• Open-source licenses of the libraries used (MIT, LGPL-3.0)

As of: 30 September 2026