Add Border to Image lets you place a 1 to 500 pixel solid-color frame around any local JPG, PNG, or WebP in your browser and download the result as a PNG, with the source image never leaving your device. The border is applied evenly on all four sides, the canvas expands by exactly twice the chosen width on each axis, and every source pixel stays at its original coordinate scale and original size. The source image is never cropped, stretched, resampled, or covered — only the surrounding canvas is new. This makes the tool a practical browser-based alternative for anyone who has tried macOS Quick Actions and found them too rigid for the specific job of framing a still image. You do not need to build a custom shortcut, install an Automator workflow, or hand the file to a remote server. The whole pipeline runs in the current tab: the file is decoded, the expanded canvas is filled with the chosen color, the source is drawn once at the calculated offset, and a download link is created locally. No account is required, no bytes are uploaded, and the temporary object URL is revoked as soon as you change the file, size, or color.
macOS Quick Actions are genuinely handy for routine batch work, but for a single framed export they often feel like overkill. The browser tool accepts one file, asks for two inputs (border width and color), and returns one PNG. That is the entire contract.
When a Browser Tool Is the Faster Path
macOS ships with a built-in Convert Image Quick Action that resizes and changes file types. It does not, however, include a built-in "frame this image" step. To get a border through that path you either configure a custom Shortcut or Automator workflow, or you hand the file to a third-party tool that uploads it. Both options add friction: the first requires setup, the second requires trust.
The Add Border to Image tool collapses that workflow to a single page. You choose a file, type a number between 1 and 500, type a six-digit hex color, and click a button. Decode, border drawing, PNG encoding, and download creation all happen locally through the browser's canvas APIs, so the source bytes, decoded pixels, the new canvas, and the temporary download URL stay in the current tab. Nothing is uploaded, no account is required, and the temporary object URL is revoked the moment you change the file, size, or color.
For readers who want the Quick Action experience without committing to one, this is the shortest path between an image on disk and an image with a frame around it.
What Add Border to Image Actually Does
The tool accepts a JPG, PNG, or WebP file up to the shared 25 MiB safety limit and bounded decoded dimensions. It parses a whole-number border width between 1 and 500 pixels and a six-digit hexadecimal color such as #1F6FEB or #000000. It then computes output dimensions by adding twice the border to both the source width and height, rejects any result above a 20-megapixel canvas limit, fills the expanded canvas with the chosen opaque color, draws the decoded source once at equal x and y offsets equal to the border width, encodes the canvas as PNG, and offers the result for download.
Three properties are guaranteed:
- The border sits outside the source. The canvas grows by 2 × border on the width and 2 × border on the height, so the source image is never covered, cropped, stretched, resampled, or repositioned at a different scale.
- Transparency is preserved. Existing transparent pixels inside the source remain transparent; only the new outer ring is filled with the chosen color.
- The output is always PNG. That keeps the export consistent and preserves any alpha channel inside the original image, but it does mean source JPEG compression is decoded and re-encoded, which can change the file size.
The pipeline relies on standard browser canvas APIs. The draw step uses CanvasRenderingContext2D.drawImage to place the source at the calculated offset, and the export step uses HTMLCanvasElement.toBlob to produce the PNG download. The canvas fills first, the source is drawn once, and the file is encoded — that order matters for correctness.
How to Add a Border to an Image in Your Browser
The full process takes three actions. Follow these steps in order:
- Choose a local JPG, PNG, or WebP. Click the file picker and select an image that sits within the displayed file limit (up to 25 MiB) and within the bounded decoded pixel dimensions the tool advertises. The file is read locally and never leaves the tab.
- Set a border width and a color. Enter a whole number from 1 to 500 in the border field and type a six-digit hexadecimal color such as #FFFFFF for white, #000000 for black, or any custom hex value you want to frame the image with.
- Select Add border, verify the expanded dimensions, and download the PNG. Click the action button. The tool will display the new width and height (each grown by twice the border), then enable the download for a full-resolution PNG. The download link is created from an object URL that is revoked as soon as you change the file, width, or color, or load a new image.
If the tool reports a problem, the most common causes are an unsupported file format, a file above the size limit, an empty PNG result, or a border value that pushes the final canvas past the 20-megapixel ceiling. Each of these fails visibly so you can correct the input rather than guessing.
The Geometry: How Borders Change Width and Height
The relationship between border width and final dimensions is simple and exact. For a source of width W and height H with a border of B pixels:
Output width = W + 2 × BOutput height = H + 2 × B
Worked example with a 20-pixel border, as documented for the tool: an 800 × 600 source becomes an 840 × 640 output, because 800 + (2 × 20) = 840 and 600 + (2 × 20) = 640. The source image is then drawn at offset x = 20, y = 20 — exactly the border distance from the top-left corner. Every source pixel keeps its original coordinate scale; only the surrounding canvas is new.
The same rule scales up. A 200-pixel border on a 1920 × 1080 image produces a 2320 × 1480 output, which lands well below the 20-megapixel ceiling. A 500-pixel border on a 4000 × 3000 image produces a 5000 × 4000 output, which is 20,000,000 pixels — exactly the 20-megapixel canvas ceiling. Anything larger is rejected with a visible error.
| What Changes | What Stays the Same |
|---|---|
| Canvas grows by 2 × border on each axis | Source image dimensions |
| New opaque border area added around the image | Source pixel coordinates (every pixel at its original scale) |
| Output format becomes PNG | Existing transparency inside the source |
| File bytes are re-encoded for the export | Source pixel content (not cropped, stretched, or resampled) |
| Download link is created locally | File location (still in your browser tab) |
Inputs, Limits, and Output at a Glance
Knowing the boundaries upfront prevents most failed attempts. The table below summarizes what the tool accepts, what it produces, and which combinations are guaranteed to work.
| Aspect | Accepted Values |
|---|---|
| Input formats | JPG, PNG, WebP |
| Input size limit | Up to 25 MiB (shared image safety policy) |
| Input dimensions | Bounded decoded pixel dimensions enforced by the tool |
| Border width | Whole number, 1–500 pixels, applied equally on all four sides |
| Border color | Six-digit hexadecimal (for example #1F6FEB) |
| Output canvas ceiling | 20 megapixels after the border is applied |
| Output format | PNG (lossless, alpha preserved) |
| Processing location | Local browser tab; no upload |
| Source pixels | Original coordinate scale, not cropped, stretched, resampled, or covered |
| Transparency | Existing alpha inside the source is preserved; the new border is opaque |
Two limits interact in practice. A border that fits the pixel ceiling might still push the file's decoded pixel count past the input budget, and a moderate border on a small image can fit both ceilings easily. If the tool reports a failure, lowering the border value is usually the fastest fix.
What This Tool Deliberately Does Not Do
Add Border to Image is intentionally narrow. It produces a rectangular, solid-color frame only. It does not add rounded corners, decorative patterns, gradients, shadows, captions, print bleed, color profiles, or vector borders. Each of those is a separate capability that lives on a different page.
It also does not give you different widths on different sides, batch processing, or layered editing. If you need any of those, a desktop image editor is the right tool. The trade-off is the same one Quick Action users already understand: a focused tool does one thing well, in this case a flat rectangular frame around a still image, with no upload and no setup.
For the common case — "I have a JPG, PNG, or WebP, I want a solid color frame around it, and I want the PNG on my disk" — this is the shortest path. Load the file, set a width and a color, download the result.