🖼️ Add Border to Image
By ToolNimba Image Team · Updated 2026-06-19
PNG, JPEG, WebP and GIF are supported. Your image never leaves your browser.
Upload an image to begin. Everything runs locally on your device.
This image border tool adds a clean, even frame around any picture. Upload a photo, pick the border color and how many pixels thick you want it, and preview the result instantly. The tool draws a larger canvas filled with your chosen color and places the image inside it, so the border sits evenly on all four sides. When you are happy, download the result as PNG, JPEG or WebP. Everything runs in your browser, so your image is never uploaded to a server.
What is the Image Border Tool?
A border (or frame) is a band of solid color added around the edge of an image. It does not change the picture itself: instead the canvas grows by the border width on every side, and the original image sits in the middle. If your photo is 800 by 600 pixels and you add a 20 pixel border, the finished image is 840 by 640 pixels, because 20 pixels are added to the left and right (800 + 20 + 20 = 840) and 20 pixels to the top and bottom (600 + 20 + 20 = 640). The picture content is untouched, it is simply matted inside the new frame.
The tool works entirely with the HTML canvas. It creates a canvas sized to the original dimensions plus twice the border width, fills it with the border color, then draws the original image inset by the border amount. Reading the file with the browser FileReader and Image objects means no pixels travel over the network, which keeps private photos private and makes the whole thing instant even on a slow connection.
Borders are mostly about presentation. A thin dark or white frame separates a photo from a busy page background, gives product shots a tidy edge, and stops light images from bleeding into a white page. A transparent border, on the other hand, adds breathing room (padding) around an icon or logo without painting any color, which is handy when you need consistent spacing in an app or document. Because a transparent border needs an alpha channel, that option always saves as PNG or WebP, never JPEG, which has no transparency.
When to use it
- Adding a white or black frame around a photo so it stands out cleanly on a web page or in a slide.
- Giving product or listing images a consistent border for a tidy, professional gallery.
- Adding transparent padding around a logo or icon so it has even spacing in an app or document.
- Creating a colored mat around a picture for a social post, invitation, or print layout.
How to use the Image Border Tool
- Click Choose an image and select the picture you want to frame.
- Pick a border color with the swatch, or type a hex value like #000000.
- Set the border width in pixels (the same band is added to all four sides).
- Optionally tick Transparent border to add clear padding instead of a color, and choose an output format.
- Click Add border, check the preview, then use Download to save the framed image.
Formula & method
Worked examples
An 800 x 600 px photo with a 20 px solid border.
- new width = 800 + 2 × 20 = 840 px
- new height = 600 + 2 × 20 = 640 px
- fill the 840 x 640 canvas with the border color
- draw the original image at position (20, 20)
Result: A framed image of 840 x 640 px with an even 20 px border on every side.
A 1080 x 1080 px square avatar with a 40 px white border.
- new width = 1080 + 2 × 40 = 1160 px
- new height = 1080 + 2 × 40 = 1160 px
- fill the 1160 x 1160 canvas with #ffffff
- draw the original image at position (40, 40)
Result: A 1160 x 1160 px image with a 40 px white frame, still square.
How a border changes the final pixel size (square border on all sides)
| Original size | Border width | Final size |
|---|---|---|
| 800 x 600 | 10 px | 820 x 620 |
| 800 x 600 | 20 px | 840 x 640 |
| 1080 x 1080 | 40 px | 1160 x 1160 |
| 1920 x 1080 | 50 px | 2020 x 1180 |
Which output format to choose
| Format | Best for | Transparency |
|---|---|---|
| PNG | Sharp edges, logos, lossless quality | Yes |
| JPEG | Photographs, smallest file for solid borders | No |
| WebP | Modern web, small files with transparency | Yes |
Common mistakes to avoid
- Expecting a transparent border in a JPEG. JPEG has no alpha channel, so it cannot store transparency. If you tick Transparent border, the tool saves as PNG instead, because a JPEG would fill the clear area with black or white.
- Thinking the border crops the photo. The border never covers your image. The canvas grows outward by the border width, so the full picture stays visible and the frame is added around it.
- Setting a huge border on a small image. A 200 px border on a 100 px thumbnail makes the frame larger than the picture. Match the border to the image size: a few percent of the width usually looks balanced.
- Forgetting the border adds to both sides. A 20 px border adds 40 px to the total width and 40 px to the total height, not 20. Keep this in mind if the final image must hit an exact dimension.
Glossary
- Border
- A band of solid color (or transparent space) added around the edge of an image, sometimes called a frame or matte.
- Canvas
- The HTML drawing surface the tool uses to compose the larger framed image entirely in your browser.
- Hex color
- A six-digit code like #ffffff (white) or #000000 (black) that specifies a color by its red, green and blue parts.
- Alpha channel
- The part of an image that stores transparency. PNG and WebP have it; JPEG does not.
- Inset
- The offset at which the original image is placed inside the new canvas, equal to the border width on each side.
Frequently asked questions
How do I add a border to an image?
Upload your photo, choose a border color with the swatch or a hex value, set the border width in pixels, then click Add border. The tool draws a frame around the image and lets you download the result. It all happens in your browser.
Does this change the size of my image?
Yes, the finished image grows by the border width on every side. A 20 px border adds 40 px to both the width and the height, because the band is applied to the left and right, and to the top and bottom.
Can I add a transparent border instead of a color?
Yes. Tick the Transparent border option to add clear padding rather than a solid color. Because transparency needs an alpha channel, the result is saved as PNG or WebP, not JPEG.
What image formats can I download?
You can save the bordered image as PNG, JPEG or WebP. PNG and WebP keep transparency and sharp edges, while JPEG produces the smallest file for photos with a solid border.
Is my photo uploaded anywhere?
No. The tool reads the file directly in your browser and uses the HTML canvas to build the frame. Nothing is sent to a server, so your image stays private on your device.
What border width should I use?
There is no fixed rule, but a border of a few percent of the image width usually looks balanced. For a 1000 px wide photo, something around 20 to 40 px reads as a clean frame without overwhelming the picture.