Add solid color borders of custom width to images

Add a permanent pixel border around an image.

freeworks offlinenothing uploaded
ToolImage Border Adder
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

A new canvas is sized to the source dimensions plus border widths, painted with the selected border color or style, and the source bitmap is drawn at the requested offset. The operation changes the pixel bounds rather than merely adding CSS around the image.

  • Explicit pixel widths make the border part of the exported image.

Worked example

Black Photo Border
Add a 10px black solid border around an image
Input
											data:image/png;base64,iVBORw0KGgo... (image data URL)
Output
												PNG with 10px black pixels added on every edge

When to use this

Framed thumbnails, scanned-document margins, and collage outlines add image borders.

Edge cases

  • A transparent source needs a border and background alpha policy.
  • Unequal borders change the image’s aspect ratio.
  • A border added before resizing scales differently from one added afterward.

References