Add a Border to an Image

Add a solid-color border or matte frame to a photo, with rounded corners and square padding for Instagram, in your browser. Free, private, batch.

🌐 Español

Drop your files here (.jpg, .jpeg, .png, .webp)

🔒 Private by design: your files are processed locally in your browser and never uploaded to any server.

Written and maintained by Last updated

Square first, border second, corners last

The three options interact, and the order they are applied in is the thing that makes the result look right. Square padding runs first, when it is enabled, expanding the photo onto a square canvas. The border is then added around whatever that step produced. The corner rounding is computed last, against the final bordered canvas.

That sequence matters more than it sounds. If the border were added before the square padding, an Instagram export would end up with a frame of one thickness on the two edges that already had padding and a different thickness on the other two. Doing it in this order gives you a uniform frame on all four sides of a square, which is what a framed print looks like and what the eye expects.

A percentage of the short edge, not a pixel count

Border width (% of image size) is measured against the shorter edge of whatever it is wrapping, and it accepts anything from 0 to 20 with 5 as the default. Percentages instead of pixels is the right call here for a specific reason: a 40-pixel frame is a heavy border on a 600-pixel thumbnail and an invisible hairline on a 6000-pixel camera file, so a fixed pixel value makes a mixed batch look inconsistent. Five percent reads as the same weight on both.

The one thing to hold in your head is that with square padding on, the short edge is the square’s side, which came from your photo’s longer edge. A 5% border on a 4000x3000 photo is 150 pixels on its own, and 200 pixels once it has been padded to 4000x4000. The frame gets visibly chunkier when you tick the square box, and that is arithmetic rather than a bug.

Rounded corners change what format you get back

Corner roundness % runs from 0 to 50, and it is a percentage of the finished canvas’s short edge, capped so it can never exceed half of that edge. At 50 the shape converges on a full pill or circle. It defaults to 0, meaning sharp corners.

Anything above 0 has a consequence worth knowing before you run a batch: rounding the outer corners cuts them to fully transparent pixels, which a JPG cannot store at all. So the moment you raise the roundness, this page switches every output to PNG regardless of what you put in, and a JPG source will come back noticeably larger because PNG does not compress photographs the way JPEG does. At 0 roundness the fill is opaque everywhere and your source format is kept: JPG in, JPG out.

If what you actually want is a circular crop with a transparent background rather than a rounded frame, Crop Image into a Circle is the page built for that shape.

Framing a whole batch in one pass

  1. Drop your photos onto the box above, or use Choose files. JPG, JPEG, PNG and WebP are accepted, and you can add several at once.
  2. Pick a Border color from the four presets, then set Border width (% of image size).
  3. Optionally raise Corner roundness %, and tick Pad to a square first (for Instagram) if you want an uncropped square export.
  4. Press Add a Border to an Image and wait for the progress bar, which advances one step per finished file.
  5. Download each result. They come back with -bordered inserted before the extension, so nothing overwrites an original.

Because the whole batch shares one set of settings, the sensible workflow is one pass per look rather than one pass per folder. Run the white-framed portfolio shots, then run the matte-mounted set separately.

Four presets, and what to do when your colour is not among them

The palette is white, black, a light gallery gray and a warm cream, and there is no free hex field. Those four are not arbitrary: white and black are the two classic photographic frames, one isolating a photo from a busy feed and the other making bright work pop by contrast, and the two neutral tones stand in for the mat board a framer would cut.

If you need a specific brand colour, the honest answer is that this page cannot give it to you and the workaround is to add a white or black frame here and recolour it in an editor afterwards. What this page is good at is the repetitive part: putting the same frame on forty product shots without opening any of them. Pair it with Resize Images when the set also needs to hit one width, or with Add Watermark to Photos when the frame is going on work you are publishing. The rest of the photo tools sit together under image tools.

See it in action

Screenshot of the Add a Border to an Image tool with sysfenix-sample.png (466 KB) loaded, Border color set to White, Border width (% of image size) set to 5
Add a Border to an Image mid-process: sysfenix-sample.png (466 KB) loaded, Border color set to White, Border width (% of image size) set to 5.
Screenshot of the Add a Border to an Image result screen showing sysfenix-sample-bordered.png ready to download (476 KB, 2% larger)
The finished result: sysfenix-sample-bordered.png ready to download (476 KB, 2% larger). The download link is a local blob URL — the file never leaves your device.

Frequently asked questions

Is the border drawn around my photo or painted over the edges of it?

Around it. A larger canvas is created first, wider and taller than your photo by twice the border width, filled entirely with the chosen colour, and then your image is drawn on top at its own unchanged pixel size in the position that centres it. No pixel of the original is covered, and as long as corner roundness is left at 0 none is discarded either. Raise the roundness and the finished canvas is clipped to a rounded rectangle before anything is drawn, which does cut the four corners away, photo included. The file otherwise simply gains dimensions in both directions.

If I set the border width to zero, does anything happen at all?

The frame itself disappears, since zero percent of the short edge rounds to zero pixels, but the image is still decoded and re-encoded through the canvas rather than passed through untouched. Zero is actually a useful setting in one combination, because with square padding turned on you get the square canvas with your chosen colour filling the two empty strips and no visible frame around the outside of it.

One photo in my batch failed and I got nothing back at all. Is that expected?

Yes, and it is worth knowing before you queue fifty files. The batch runs one image after another in a single pass with no per-file error handling, so a file the browser cannot decode ends the whole run and the images that had already finished are not offered for download. If a batch fails, split it in half and repeat until you find the file your browser will not open.

Why is my bordered JPG a different file size when it looks the same?

Every result is encoded fresh from canvas pixels rather than having a frame stapled onto the original bytes. For a JPG or WebP source that encode runs at the browser's own default quality, because this page does not send a quality value, so what you get back is a second-generation lossy file. One re-encode is visually unremarkable at normal viewing sizes, but it is not lossless, which matters if the bordered copy is going to become your working master.

What dimensions does the square-padding option produce?

The square's side length is the longer of your photo's two edges, so a 4000x3000 shot becomes 4000x4000 before any border is added, and the border percentage is then measured against that 4000 rather than the original 3000. Your photo is never scaled up or down in the process, which is why the pixel dimensions grow instead of the subject shrinking.

Can I use one colour on the top and bottom and another on the sides?

No. A single fill colour covers the whole canvas before the photo is drawn onto it, and that is precisely what makes the square-padding result look intentional, because the strips added to the short edge and the frame around the outside are guaranteed to match. Uneven or per-edge borders are an image-editor job.

Related tools