Border & Frame Adder

A frame changes how an image sits on a page — five styles, all rendered locally.

Drop an image here or click to choose a file — JPG, PNG or WebP

Runs in your browser. Your image is decoded and redrawn by the Canvas API inside this tab. It is never uploaded, and the original file on your disk is never modified — the tool always produces a new file.

What the image Border & Frame Adder does

A border does a specific job: it separates an image from whatever is behind it. A photograph with a white edge posted on a white page looks like it is floating in the text; the same photograph with a thin dark border reads as a distinct object. That is why frames survive in a medium that has no physical frames.

Five styles are offered. Solid is a plain band of colour and covers most needs. Double draws two bands in different colours, which reads as more formal and works well on a light background. Gradient runs one colour into another diagonally, which suits brand-led social graphics. Polaroid uses equal margins on three sides and a much deeper bottom margin, optionally with a caption — the instant-photo look. Mat board adds generous padding and a subtle inset shadow around the opening, imitating a mounted print.

The inner gap is a small control with a large effect. Setting it above zero draws a second colour between the image and the outer frame, which is how gallery mounts work: a narrow line of contrasting colour makes both the image and the frame look intentional rather than adjacent.

One practical note on sizing. The frame is added around the image, so the output is larger than the input — the counter shows by how much. If the destination has a fixed size, add the frame first and then resize, not the other way round, or the frame will be scaled down along with everything else.

How to use it

  1. Load your image and pick a style.
  2. Set the width. As a rule, 2–4% of the image's shorter side reads as deliberate.
  3. Add an inner gap in a contrasting colour for a gallery-mount effect.
  4. For a polaroid, type a caption to sit in the deep bottom margin, then download.

A worked example

The same 1200 × 800 photo, framed four ways:

StyleOutput sizeReads as
Solid, 24px white1248 × 848A print on a page
Solid 24px + 6px inner lime1260 × 860A mounted, gallery-style print
Polaroid, 24px1248 × 901An instant photo, caption space below
Gradient, 40px1280 × 880A branded social graphic

Note how much taller the polaroid is: the bottom margin is over three times the side margins, which is what makes the look recognisable. If you crop that margin off to save space, it stops reading as a polaroid and becomes an off-centre border.

Frequently asked questions

How wide should a border be?

Around 2–4% of the image's shorter side is a reliable starting point — roughly 16–32 pixels on a 800-pixel-tall photo. Thinner reads as an accident; much thicker starts to compete with the image.

Should I add the border before or after resizing?

Add the border last if the final dimensions matter. The frame is drawn around the image, so resizing afterwards shrinks the frame too and it may end up thinner than you intended.

Why is my output larger than my input?

Because the frame is added around the image rather than cropping into it, so nothing in the photograph is lost. The counter shows exactly how many pixels were added in each direction.

Can I use a border to make an image fit a required aspect ratio?

Not with this tool — the frame is even on the sides. To pad an image out to a specific ratio, work out the target with the Aspect Ratio Calculator and use the Resizer & Cropper.