Image Border Adder

How to add a border to an image online, free

To add a border to an image online, click Select Images (or drop photos on the upload area), set Border Width, Border Style and a colour, then click Download. The border is drawn around your picture, so nothing is covered or cropped: a 1200 x 800 photo with a 40 px border becomes 1280 x 880 pixels. The result is always a PNG named like photo_bordered.png.

This free border adder goes beyond a single-colour outline. It can fill the border with a two-colour gradient, draw it solid, dashed, dotted or double, round the corners up to 300 px and add a drop shadow. One set of settings applies to every image you have loaded, so a whole batch gets the same frame, and Download All saves the lot as one ZIP.

Everything runs in your browser. The images are drawn and encoded by JavaScript on your own device, nothing is uploaded, and you can confirm that in the Network tab of DevTools. Trim a photo first with the image cropper or set its size with the image resizer, because border width is counted in the picture's own pixels.

Table of Use: settings for common frames

Output size is the image width plus 2 x Border Width, and the same for height. A shadow adds padding of about 1.5 x Shadow Blur on each side, moved by the offsets.

To match a border to your photo, sample a shade with the image color picker, then paste the hex code into Border Colour. Planning a gradient first? The gradient generator shows colour pairs side by side.

Features

• Border Width 0 to 200 px, starting at 20, the same on all four sides.
• Four line styles: Solid, Dashed, Dotted and Double. Dashes and dots are laid out so every corner gets one and none run together.
• Solid colour or Gradient. Colours are hex codes such as #000 or #1a2b3c, with a swatch picker. A gradient has a start colour, an end colour and a Gradient Direction from 0 to 359 degrees (0 is left to right, 90 is top to bottom).
• Corner Radius 0 to 300 px. The outside of the border is rounded, and the photo inside is rounded to match when the radius is larger than the border width.
• Drop shadow with Shadow Blur 0 to 50, a Shadow Colour and X and Y offsets from -50 to 50. It is cast by the border and the image together, and the canvas grows to hold it.
• Transparency stays transparent. The border is a ring around the picture, not a background behind it, so transparent areas of a PNG are not filled.
• Batch and ZIP. Any number of images share the settings; Download All (N) as ZIP gives one file with clashing names made unique.
• Size readout. Under each preview you see the original size, the new size and the PNG file size.

For rounded corners without any frame, use the round corner generator; to put several framed pictures on one canvas, try the collage maker.

How to add a border, step by step

1. Click Select Images or drag photos onto "Upload Images to Add Borders". JPG, PNG, WebP, GIF and BMP work, and you can pick many at once.
2. In Border Settings, drag Border Width to the thickness you want.
3. Pick a Border Style (Solid, Dashed, Dotted or Double) and a Border Fill: Solid colour or Gradient. Type a hex code in Border Colour, or use the swatch.
4. Optional: raise Corner Radius to round the frame, and raise Shadow Blur or an offset to add a shadow.
5. Check each preview. The checkerboard behind it shows which areas are transparent.
6. Click Download under one image, or Download All (N) as ZIP. For a smaller file afterwards, use the PNG to JPG converter.

Who can use it

• Online sellers who want every product photo framed the same way, then watermarked before upload.
• Photographers and students who need a white margin around a print or a portfolio piece.
• Social media and blog creators who want a rounded, shadowed card or a coloured outline, plus a caption from Add Text to Image.
• Teachers and office staff who prepare handouts, slides or notice-board images and would rather not open a design program.

FAQs