Add a Border to an Image
Add a solid-color border frame around any photo right in your browser. Set the border width in pixels and pick a color, watch the live preview, then download. Nothing is uploaded.
- Free, no account
- No watermark
- No usage limit
About the Add Border to Image
Add a solid color frame around any image, right in your browser. Pick a width, pick a color, drag the slider and watch the preview update, then download. Free, no account, and the picture never leaves your device.
Some "add border online" tools are the paint-over kind. They keep your image the same size and lay the color band over your outermost pixels, covering a strip along every edge. If a face, a line of text, or the corner of a product sat near that edge, it's hidden under the band, and you often don't spot it until later. What happens here is that the image grows instead. Load a 400x300 photo, set a 20 pixel border, and you download a 440x340 file with the original sitting untouched in the middle, nothing covered up. The output size shows on screen, so you can watch it grow as you drag.
How to use
- Choose an image. Click the box or drag a file into it. PNG, JPG, WebP, and GIF all work. The tool reads the real pixel size and shows it. Files over 40 MB are turned away so a giant image can't freeze the tab.
- Set the border width. Drag the slider from a hairline up to a thick frame. It's applied to every side, so a 30px border adds 60px to the width and 60px to the height. The output size updates as you drag.
- Pick a color. Use the picker for an exact hex, or tap one of the swatches: white, black, a couple of grays, or an accent like rose, blue, or gold.
- Add an inner mat if you want one. The second slider drops a thin band of a different color between the border and the photo. A mat color picker appears once you nudge it above zero. Leave it at zero for a plain single border.
- Check the preview. The checkerboard behind the image marks any transparency. The framed result renders live as you adjust.
- Download. It saves to your device in your original format where the browser can re-encode it, and as a clean PNG otherwise.
Why the tool grows the image
The job of a border is to present the picture, so what the tool does is open up new space around your photo and fill it with your border color. Every original pixel stays put, exactly where it was.
Because the photo underneath is untouched, the border is reversible. You can crop the file back to its original dimensions later and get your exact starting image back. A border painted straight over your edges can't be undone, those covered pixels are gone for good.
The output size on screen is there so you never guess. A 1080px square with a 40px border reads as 1160x1160 before you commit. If a border tool won't tell you the output dimensions, that's usually a hint it's the paint-over kind.
The inner mat, plus picking width and color
The inner mat is the piece most border tools skip. Switch on the second slider and a thin band of a second color sits between the outer border and the photo, the way a real framed print has a mount inside the frame. A wide white border with a thin charcoal mat line hugging the photo looks like something off a gallery wall. Keep the mat thin, a few pixels, or it starts competing with the border instead of accenting it.
For the outer border, think in proportion rather than fixed pixels. Twenty pixels is bold on a 300px thumbnail and nearly invisible on a 3000px print. Somewhere around 3 to 5 percent of the shorter side lands balanced for most jobs. Go past 5 percent for the thick Polaroid look or a clean white frame on an Instagram post. A screenshot that only wants a faint separation line does better at a hairline. The width slider caps at half the short side so the frame can never swallow the picture.
The color that works is the one that contrasts with the edges of your photo. White is the default because it separates a light photo from a light page and matches most feeds and print mats. A white border around a pale, high-key image blurs the two together though, that's when black or charcoal gives the photo a clear edge. For a dark, moody photo, a light border marks where the dark image ends. For a set of product shots, paste your brand hex into the picker and every image wears the same band.
A file border is not a CSS border
If you build web pages, you might wonder why bake a border into the file when you could write border: 20px solid white in CSS. Because a CSS border only exists on the page you control. The image file has no frame of its own, so the moment it travels anywhere, someone saves it, you drop it in a slide, you post it in a chat, it turns up edge to edge again. A baked-in border is part of the file itself, so the frame goes with the image everywhere. CSS is fine if the border only shows on a page you control. But once the image has to travel, bake it in here.
For a plain solid frame, that's the whole job here. A gradient border, a drop shadow, a textured edge, or different widths on each side is work for a desktop editor like Photoshop or GIMP. Framing hundreds of files the same way is a job for a batch script. But for one image, or a handful you want to see as you tweak, this is quicker than either.
Frequently asked questions
Can I set a different border width on each side?
No. The same width goes on all four sides, which is what reads as deliberate for a frame. If you specifically want a heavier bottom strip, the old Polaroid caption style, or uneven widths top to bottom, that's a desktop editor job. The even border here is on purpose, uneven ones tend to look like a mistake unless the viewer can tell you meant it.
Can I remove the border again later?
Yes. Crop the bordered file back down and your original returns untouched. You have to trim the exact border width you added off each side though, and if you turned on an inner mat, take the mat band off with it, not just the outer border. So a 30px border over a 6px mat means shaving 36px from every edge to land back on your starting picture. The file doesn't store those widths anywhere, so note them down if you think you'll want the plain version back later.
Does adding a border lower my image quality?
Your original is never downscaled, it's drawn at full resolution in the middle. The only quality question is the save format. Choose PNG and every pixel is kept exactly. Choose JPG and there's the usual light JPEG recompression, which is hard to notice at a good quality setting. The border area is flat color, so it adds almost nothing to the file either way.
Which formats can I load, and what comes back?
You can load PNG, JPG, WebP, and GIF. The download keeps your format where the browser can re-encode it, so JPG stays JPG and PNG stays PNG. Formats a browser can read but not re-save, like GIF and BMP, come back as PNG, which keeps every pixel and every bit of transparency. An animated GIF is the one case where something real is lost: only the first frame survives, so you get a still PNG with a border on it. The tool counts the frames when you load the file and says so on screen rather than letting you find out after the download. There's a 40 MB ceiling so an enormous file can't lock up the tab.
What happens to a transparent PNG?
The checkerboard pattern behind the preview shows exactly where the transparency is. The border fills solid around the outside, and the mat fills too if you add one, but any transparent area inside your actual photo stays transparent in the download. A logo on a clear background keeps that clear background, now with a frame around the whole thing.
Are my images uploaded, and does it work offline?
Nothing is uploaded. Reading the file, drawing the border, and saving the result all happen on your device. You can check for yourself: open your browser's network panel, add a border, download it, and you'll see no request leave. That also means the tool works with the Wi-Fi off, and any EXIF or GPS data tucked into a phone photo stays on your machine instead of landing on a stranger's server.
Can I round the corners and add a border too?
You can, but the order changes the result. Round the corners after the border and the rounding follows the frame's outer edge. Round first, then add the border, and the square frame puts hard corners back on the outside. Decide which look you want, then run the two tools in that sequence. Our round corners tool handles the rounding side.