Image Border / Frame Adder - Add Decorative Borders

How to use this tool

1. Choose an image or drop it into the upload area.
2. Set the border size, corner radius, colour, style, and export format.
3. Check the output dimensions and download the framed image.

About This Tool

This image border tool adds a solid frame, a diagonal colour gradient, or a centered soft glow around a photo. Set the border width from 0 to 120 pixels and adjust the corner radius to round the outside frame and the photo where the curve reaches it. The preview shows the final image locally; the uploaded file is decoded and rendered in your browser, with no image upload to a server.

How the frame changes dimensions

The tool expands the canvas instead of shrinking the photo. If the source image is W pixels wide and H pixels tall and the border size is S, the output is (W + 2S) by (H + 2S). For example, a 1200 × 800 image with a 24-pixel frame becomes 1248 × 848 pixels. The original image is drawn at its original pixel size, so this expand mode does not resample the photo. The dimension readout updates as you change the border width.

Choose a style and corner radius

Solid frames use the selected colour, and the colour presets make common black, white, gray, or transparent surrounds quick to set. A transparent solid frame is useful when an image will sit on a page with its own background; rounded transparent corners are visible in PNG and supported WebP exports. The gradient runs from your chosen colour at the top-left toward a tint blended 40% toward white at the bottom-right. The shadow option keeps a white backdrop and draws a centered colored glow, so it is not an offset shadow beneath the photo.

Rounded corners clip both the outer frame and the photo edge when the radius extends into the image area. This is useful for profile pictures, social thumbnails, product cards, and branded gallery previews. A radius of zero leaves square corners. You can drag an image into the upload area, adjust the settings, compare original and output dimensions, and reset to the default 20-pixel white frame at any time. The preview is scaled to fit the page; the downloaded file retains the output canvas dimensions shown below it.

CSS equivalents

These raster effects have familiar CSS counterparts, although an exported image is a fixed bitmap rather than a live page element. A border resembles border, the corner clipping resembles border-radius, and the glow resembles box-shadow. Use CSS instead when a web page needs a responsive frame that changes with its layout.

• Solid border: border: 10px solid #ff0000;
• Centered glow: box-shadow: 0 0 16px #ff0000;
• Rounded corners: border-radius: 12px;

File format advice

Choose an export format after checking whether the image needs transparent areas. PNG keeps transparency and is a good fit for sharp graphics, logos, and screenshots. WebP also keeps transparency in browsers that support WebP encoding, and its quality slider trades some detail for a smaller file. JPEG is useful for photos, but it cannot store transparency; this tool fills transparent corners or frame areas with white before encoding. Its quality control can reduce file size, but very low settings may add visible artifacts around crisp frame edges.