How to add a border to an image
- Drop a picture on the box, click it to choose a file, or paste one with Ctrl+V (Cmd+V on a Mac). A sample photo loads first.
- Pick a Style. Solid is one band of color, Polaroid adds a wider bottom edge, and Double adds a thin line inside the band.
- Type a Border width and choose its Unit. Pixels set the thickness on each side. Percent uses the shorter side of your image, so one setting suits a phone photo and a thumbnail.
- Choose a Border color, plus a Line color for Double. The preview updates as you type.
- Pick Save as and press Download bordered image. The file name gets
-borderedadded.
How the border is built
The tool makes a canvas larger than your picture, fills it with the border color, and draws your picture at an offset equal to the border width. The result is (width + 2 x border) by (height + 2 x border) pixels. Polaroid adds four more border widths at the bottom, so that edge is five times the width. In Double, the line is max(1, round(border / 4)) pixels thick and sits in the middle of the band. The border goes around the picture, never over it. Drawing uses fillRect() and drawImage() with whole-pixel offsets, so edges stay sharp.
Worked example
With the sample photo (1200 x 800 px), Solid, 20 px and white, the status line reads "Sample photo (sample-photo.jpg), 1200 x 800 px. Added a 20 px solid border (#ffffff). Result: 1240 x 840 px." That is 1200 + 2 x 20 by 800 + 2 x 20. Polaroid at the same width gives 1240 x 920 px, with 100 px at the bottom. Double draws a 5 px line starting 7 px in from the edge.
Limits and edge cases
- Width range: 1 to 2000 px, or 0.1 to 50 percent of the shorter side. Pixel decimals are rounded. Bad input shows a message and keeps the last good preview.
- The result can be up to 64 megapixels. To reach an exact size afterward, use the Image Resizer.
- The border is opaque and fills the canvas first, so transparent areas of a PNG show the border color. The saved copy has no EXIF data, and animated GIFs keep only their first frame.
- The Polaroid strip is blank. Add a caption afterward with the Image Watermark tool (Bottom center). To trim first, use the Image Cropper. For gradients and shadows, try the Screenshot Beautifier.
Frequently asked questions
How do I add a white border around a photo?
Leave Style on Solid and Border color on white, then set Border width. About 20 px suits a photo 1200 px wide. Or set Unit to percent and use 2 to 3 percent so the border scales with the picture.
How do I make a Polaroid frame?
Choose Polaroid. The left, right and top borders use your width and the bottom border is five times wider, close to the proportions of an instant-film frame, leaving a strip for a caption. Try a cream such as #f5f0e6 for an aged look.
Does adding a border make the image bigger?
Yes. The border goes around the picture, not on top of it, so each side grows by the border width. A 1200 x 800 px photo with a 20 px border becomes 1240 x 840 px, and nothing is covered or cropped.
Can I add rounded corners or a gradient border?
No. Borders here are plain rectangles in one color, plus an optional thin line for Double. For rounded corners on a web page, apply the CSS border-radius property to the image instead.
Sources: MDN Web Docs, CanvasRenderingContext2D.fillRect(), CanvasRenderingContext2D.drawImage() and HTMLCanvasElement.toBlob().