Add border to image with padding on each side
Add a border to an image by typing a border width in pixels and picking its color. You can also add padding on each side, transparent or in a solid color, between the picture and the border. The tool runs in your browser and saves a PNG with the picture at its original pixel size.
Choose image
JPEG, PNG, WebP and other formats your browser can decode.
No image selected.
Preview & download
Create the PNG to see the actual result. Previews fit their panels; the dimensions below describe the full image.
Your image will appear here.
Choose Create PNG to see the result.
Choose Create PNG to create a preview and downloadable PNG.
Your image is never resized or covered. Padding adds canvas space; the outer border adds more. PNG output may be larger than the source.
How to add a border to a photo
Select Choose an image and pick a photo from your device. The Original image preview shows it, and the line under the file chooser lists its name, pixel size and file size. Type a width in Outer border (px). The Border color field appears once the width is above zero; type a six-digit hex value, such as #FFFFFF for a white border, or use the color picker.
Under Padding (pixels), set Top, Right, Bottom and Left. Transparent padding is on at first; clear it to pick a Padding color. The line under the settings shows the output size as you type.
- Select Choose an image and pick a photo.
- Set Outer border (px) and Border color.
- Set the four padding sides, and keep Transparent padding or pick a Padding color.
- Select Create PNG, check the preview, then select Download PNG.
Border width, padding and output size
The outer border has one width on all four sides. Padding sits between the image and that border, and each side takes its own value. The output width is the image width plus left and right padding plus twice the border, and the height uses top and bottom. A 100 × 80 image with 10 pixels of padding on every side and a 2-pixel border becomes 124 × 104.
For a plain white frame on a 1080 × 1080 photo, set Outer border (px) to 40 and Border color to #FFFFFF, and leave the padding at zero. The PNG is 1160 × 1160. To leave caption space under a 1200 × 800 image, set only Bottom to 200 and get 1200 × 1000.
Every field takes whole pixels from zero up, and the tool sets no maximum. A very large canvas can fail when it exceeds what your browser's canvas or memory allows.
What the PNG contains
The download is one PNG named after the original with -border-padding added, for example photo-border-padding.png. The picture is drawn at its decoded size with no scaling or smoothing, so the border never covers it and nothing is cropped. Each Create PNG starts again from the original, so borders do not pile up while you try settings.
Transparent padding stays transparent. A Padding color fills only the added space, and transparent pixels inside the source image stay transparent. The border is always one solid color.
The browser applies the photo's orientation when it opens the file. An animated image gives one still frame, EXIF and other metadata are not copied, and colors are exported in sRGB, so wide-gamut or HDR colors can shift. After Create PNG, the page lists the original and output sizes and says so when the file did not get smaller.
Limits
The border is a plain rectangle of one color and one width around the whole canvas. There are no patterns, decorative frames, shadows or rounded corners, and no outline that follows a shape in the picture. For a frame with a different width on each side, clear Transparent padding and set Padding color to the border color, so the two read as one frame.
The output is always a PNG, which can be larger than a JPEG source, because adding canvas is not compression. Reset settings sets every padding and border width back to zero.
You work on one image at a time, and choosing a new file replaces the current one. The page has no drag-and-drop area and no batch mode. While the tool works, the Clear image button reads Cancel & clear and stops the work. An empty, damaged or unsupported file shows an error, and you can then choose another.
Questions
How do I add a border to a photo?
Choose the photo, type a width in Outer border (px) and pick a Border color. Select Create PNG to build the image, check the preview, then select Download PNG. The border goes outside the picture, so none of the photo is covered, and the output grows by twice the border width in each direction.
How can I add a white border to a picture?
Set Border color to #FFFFFF and type the width you want in Outer border (px). For a white mat inside a colored frame, keep a colored border, clear Transparent padding and set Padding color to #FFFFFF. The border and padding are opaque white in the PNG, so they stay white on any background you place the image on.
What is the space between a picture and its frame called?
In framing, the border around a picture is the frame and the space between the picture and the frame is often called a mat. On this page, Outer border (px) draws the frame and the Padding fields add the space inside it, either transparent or in the Padding color you pick.
Does adding a border resize or crop my image?
No. The picture is drawn at its decoded pixel size with no scaling or smoothing, and the canvas grows around it. A 1200 × 800 photo stays 1200 × 800 inside the new PNG. Only the file changes: the output is a new PNG encoding, so its byte size can differ from the original file.
How do I add an outline to a photo?
This tool draws a rectangular border around the whole canvas. It does not trace an outline around a person, logo or other shape inside the picture. For a rectangle with an outline, use Outer border (px). To curve the corners of a picture instead, Image Round Corners rounds each corner and saves a transparent PNG.
Can I add a border to a PNG with a transparent background?
Yes. Transparent pixels inside the source stay transparent in the output, even when you choose a Padding color, because that color fills only the added space. With Transparent padding kept, the space between the picture and the border is transparent too. The border itself is always a solid color.
Which images can I use?
The tool opens images with your browser's own decoder, which handles JPEG, PNG and WebP. Other formats, such as AVIF or HEIC, work only where your browser can decode them. A damaged or unsupported file shows an error. A very large image can exceed your browser's memory, and Cancel & clear stops the work.
Does my image leave this device?
No. Opening, previewing and building the PNG all happen in your browser on this device. The tool does not upload, log or store the image. Clear image, Cancel & clear while the tool works, and leaving the page each release the image and the finished PNG from the page.