To add a border to an image, choose a whole-number width between 1 and 500 pixels, pick a solid six-digit hex color, and export the framed picture as a PNG — the original image is not cropped, resized, or covered, and nothing leaves your browser. The border is drawn outside the source picture, so every original pixel stays at its original coordinate and the canvas simply grows on all four sides. A 20-pixel border adds 40 pixels to both the width and the height, and the source image starts at the pixel offset x=20, y=20 inside the new canvas. Because the canvas is filled first with the chosen color and the source is then drawn once at that offset, the operation is reversible in concept: removing the border pixels would yield the original picture. Processing happens entirely on your device using the browser's built-in image decoding and canvas APIs, so JPG, PNG, and WebP files up to 25 MiB can be framed locally, and the final PNG is generated through the standard canvas export path documented on MDN's Canvas drawImage and canvas toBlob references.
How a Border Is Placed Around the Image
The frame sits outside the picture, not on top of it. The tool first creates a canvas that is exactly border pixels larger on every side, fills that canvas with the chosen hex color, and then draws the original image once at the pixel offset (border, border). No resampling happens, so a 2000×1500 photograph is not blurred or stretched — it is simply placed into a larger colored rectangle.
Because the offset equals the border on every side, the final dimensions follow a single formula:
- Output width = source width + (2 × border width)
- Output height = source height + (2 × border width)
- Source pixel (0, 0) is redrawn at coordinate (border, border) in the new canvas
Worked example using a 1200 × 800 picture and a 20-pixel border:
- Output width = 1200 + (2 × 20) = 1240 pixels
- Output height = 800 + (2 × 20) = 840 pixels
- Source placed at offset (20, 20)
- Original 1200 × 800 region untouched inside the larger 1240 × 840 canvas
This even expansion is why a 1-pixel border reads as a thin line and a 200-pixel border reads as a wide matte — the source picture never changes size or position relative to itself.
Add a Border to a JPG, PNG, or WebP Step by Step
- Open Add Border to Image in your browser.
- Choose a local JPG, PNG, or WebP file from your device. The tool checks the file against the displayed size limit before decoding it.
- Enter a whole-number border width from 1 to 500 pixels.
- Type a six-digit hexadecimal color value, such as #FFFFFF for white or #1F2937 for a dark slate.
- Click Add border. The canvas expands by twice the border width on each axis.
- Confirm the displayed output width and height match what you expect.
- Click Download to save the framed PNG to your device.
If you change the file, the border size, or the color after an export, the previous result is invalidated and its temporary download link is released. A stale asynchronous export cannot overwrite your newer selection, so what you see in the preview is always the result of the current inputs.
Input, Output, and Size Limits
The tool enforces a handful of limits to keep decoding and encoding predictable inside a browser tab. The table below summarizes the constraints that matter when you add a border to an image.
| Property | Value or behavior |
|---|---|
| Accepted input formats | JPG, PNG, WebP |
| Maximum file size | Up to 25 MiB |
| Decoded pixel budget | Bounded by the shared image safety policy |
| Border width range | Whole numbers from 1 to 500 pixels |
| Border color format | Six-digit hexadecimal (e.g. #0A84FF) |
| Border placement | Outside the source, equal width on every side |
| Source image treatment | Drawn once at the border offset; no crop, resize, blur, or overlay |
| Output format | PNG (always, even when the source is JPG or WebP) |
| Output canvas limit | Up to 20 megapixels after the border is added |
| Transparency behavior | Inner transparent pixels stay transparent; the outer border is opaque |
| Processing location | Current browser tab only; no upload |
| Failure modes that surface visibly | Invalid dimensions, unsupported files, malformed colors, excessive border sizes, decode failures, missing canvas support, empty PNG output |
Two of those limits interact. A very wide border on a very large image can push the final canvas past the 20-megapixel ceiling, which causes the export to fail visibly rather than silently truncate the picture. If you need an unusually thick border on a high-resolution photo, reduce the source dimensions with the Image Resizer first, then frame the smaller result.
What Add Border to Image Does Not Do
This is a deliberately focused tool. Knowing what it leaves out helps you decide whether it fits the job or whether you should reach for a desktop image editor instead.
- It does not add rounded corners, decorative patterns, gradients, shadows, captions, or vector borders.
- It does not support different widths on each side — one value is applied to all four edges.
- It does not crop, stretch, resample, blur, or cover the source picture in any way.
- It does not embed a color profile, ICC tag, print bleed, or DPI metadata.
- It does not batch-process a folder. One image produces one framed PNG.
- It does not perform non-destructive editing — the original file is not modified, but the framed result is a fresh PNG export.
For any of those needs — rounded corners, color-managed print prep, per-side widths, batch framing, or layered design work — switch to a full image editor. For everything this tool does do, it stays in the browser and keeps the file local.
Choosing the Right Border Width and Color
A solid frame is mostly a styling choice, so a few practical guidelines help you pick values that look intentional rather than accidental.
Width. Thin borders (1–8 pixels) read as a clean divider and work well for product photos that need a quiet edge. Medium borders (10–40 pixels) look like a gallery matte and suit portraits and editorial crops. Heavy borders (60–500 pixels) suit posters, social posts that need breathing room, or visual mockups where the frame is part of the design rather than a finishing touch.
Color. The tool accepts a six-digit hex value, so any of the roughly 16 million sRGB colors are available. White (#FFFFFF) and black (#000000) are the safest defaults; off-white tones such as #F5F5F5 or warm beige like #E8DCC4 soften a busy photograph. If you want to match an existing palette in the picture, sample a pixel first with the Image Color Picker, then paste the captured hex value back into the border field.
Transparency. Any transparent pixels inside the source remain transparent inside the framed PNG. The border itself is always opaque, so the frame stays visible even on a checkerboard preview. This makes the tool a good fit for stamping a solid frame around a cut-out PNG while keeping the subject's own alpha channel intact.
Output size. PNG re-encodes the picture through the browser canvas path, which can increase file size compared with a JPG source. That is normal and a fair trade for the dependable local export, but if you need a smaller file after framing, run the framed PNG through a compression pass separately.