Add a Border Without Changing Image Size

Inside keeps the canvas; outside expands it

An inside border draws over the existing edge pixels. The output stays W by H pixels, so it fits the same dimension limit as the source. The tradeoff is visible: the border covers a strip of the image on all four sides.

An outside border adds canvas around the source. Its output is (W + 2b) by (H + 2b), where b is the border width in pixels. ImageMagick describes its Border operation as adding space around the edge of an image, and Pillow's ImageOps.expand accepts a pixel border width and fill value. ^{[1] [2]}

Calculate the output before you add the border

Start with a 1200x800 image and a 40 pixel border. Outside placement produces 1280x880 because each dimension gains 40 pixels twice. The aspect ratio moves from 1.500 to about 1.455; equal padding pulls a non-square image slightly closer to square.

Inside placement stays 1200x800. It leaves a central 1120x720 rectangle untouched and covers 153,600 edge pixels, or 16% of the source area. In general, the untouched center measures max(0, W - 2b) by max(0, H - 2b). This check matters when text, faces, or product edges sit close to the frame.

Choose placement by what must remain fixed

Keep dimensions fixed: choose inside. Keep every source pixel visible: choose outside. Keep both fixed: first shrink the image inside a target canvas, because a border needs either existing edge area or new pixels.

Use the imgrove Add Border to Image tool to switch between both placements. The preview reports source size, output size, width, opacity, and edge coverage. Check those values against the destination instead of judging only the thumbnail.

Transparent padding still changes pixel size

Set an outside border to 0% opacity when you need clear breathing room rather than a visible frame. A 40 pixel transparent border around 1200x800 still produces 1280x880. The added pixels carry zero alpha, but they remain part of the raster grid.

PNG supports truecolor pixels with an alpha channel, so it can store that transparent padding. ^[3] A JPEG copy cannot keep the same transparent result. Use PNG for this workflow and inspect the file against both a light and dark background.

Export a new PNG and keep the original

The browser serializes the canvas bitmap into a new image file, with one output image pixel for each canvas coordinate-space unit in this workflow. ^[4] The imgrove tool exports one static PNG and does not copy source EXIF, IPTC, XMP, animation, or container-specific data.

Keep the original as the master. After download, verify the pixel dimensions, inspect every edge at the final display size, and confirm transparency when you used clear padding. If the destination has a strict size, follow with the Image Size Checker before upload.

Inside and outside borders at a glance

Use an inside border when

• The destination requires the current pixel width and height
• Covering a narrow strip along each edge will not hide content
• You want a frame without a larger canvas

Use an outside border when

• Every source pixel, caption, or product edge must remain visible
• You need visible space or transparent padding around the image
• The destination accepts the calculated larger width and height

Check the geometry and output

Related imgrove tools

Try both placements and verify the dimensions

Process one JPG, PNG, or WebP locally. Compare inside and outside placement, set width, color, and opacity, then download a PNG after the source-to-output dimension report matches your destination.

Try Add Border to Image

Try the workflow and tell us what worked, what failed, or what needs clearer guidance: hi@imgrove.com.

Technical references

• ImageMagick Usage: Border, adding space around the edge of an image
• Pillow ImageOps.expand reference
• W3C Portable Network Graphics Specification, Third Edition
• WHATWG HTML Standard: serializing canvas bitmaps