Add Border to Image
Upload an image and add a custom border with your chosen color, thickness, and rounded corners — exported from your browser.
Drop an image here, or click to browse
JPG, PNG, WebP · up to 50 MB
How to use Add Border to Image
Add a custom color border or frame to any image directly in your browser. Control the border width in pixels, choose any color with the color picker, and optionally add rounded corners with a configurable radius. The result is exported as a PNG, preserving any original transparency. No upload, no watermark — free and private.
- Upload your image using the file picker or drag-and-drop.
- Drag the "Border width" slider to set the thickness in pixels (1–200 px).
- Use the color picker to choose the border color (white and black are the most common).
- Set a corner radius (0–100 px) for rounded or pill-shaped framing.
- Preview the result live on the canvas, then click "Download Bordered Image".
Your data never leaves your device — 100% private processing.
Common border styles and use cases
A thin 1–5 px black or white border is the most common choice for photos shared on social media — it visually separates the image from the page background. A thick white border (30–60 px) mimics the classic Polaroid or print photo look, ideal for Instagram and portfolio use. Colored borders (brand colors at 10–20 px) are used in marketing materials to create a consistent visual identity. Rounded corners at 15–30 px radius give a modern, softened look that works well for product photography and app screenshots. A corner radius equal to half the image dimension creates a circle — use the dedicated Circle Crop tool for this instead.
| Style | Width | Corner radius | Best for |
|---|---|---|---|
| Thin outline | 1–5 px | 0 | Social media, web thumbnails |
| Polaroid frame | 30–60 px | 0 | Portfolio, Instagram aesthetic |
| Brand frame | 10–20 px | 0 | Marketing materials |
| Rounded frame | 15–30 px | 15–30 px | App screenshots, product shots |
Canvas implementation: border and rounded corners
The border is added by creating a new canvas larger than the source image by 2× the border width in each dimension. The background is first filled with the chosen border color (for straight corners, using fillRect; for rounded corners, using a quadratic Bézier path matching the corner radius). The source image is then drawn at an offset of (borderWidth, borderWidth), centred within the bordered canvas. The rounded corner path uses ctx.quadraticCurveTo() at each corner and ctx.fill() to paint the border region before drawing the image. The final canvas is exported as a PNG with full color depth.
Glossary
- Border width
- The thickness of the added frame in pixels, added symmetrically on all four sides.
- Corner radius
- The radius in pixels of the rounded corners of the outer border frame.
- Frame
- A decorative border added around an image to visually separate it from its background or add aesthetic style.
- quadraticCurveTo
- A Canvas 2D API method that draws a quadratic Bézier curve, used to render smooth rounded corners.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Add Border to Image?
- Lossless and lossy compression options to balance quality vs file size
- Supports all major formats: JPEG, PNG, WebP, AVIF, GIF
- Batch operations keep filenames and folder structure intact
- Runs client-side — no image data ever leaves your device
Common use cases
- Resize product photos before uploading to an online store
- Compress images to pass file-size limits on job application portals
- Convert PNG screenshots to WebP for faster web pages
- Create thumbnails for YouTube or social media posts
- Remove backgrounds from profile photos
Related Image Tools
Circle Crop Image
Crop any image into a circle with a transparent background. Perfect for round profile pictures and avatars. Free, private PNG export.
Crop Image
Crop images online by entering coordinates or choosing an aspect ratio preset. Free, private, browser-based image cropper. Supports JPG, PNG, and WebP.
Image Watermark
Add a text watermark to your images online. Customize text, font size, color, opacity, and position. Free, private watermarking that runs in your browser.
Compress Image
Compress JPG, PNG, WebP images online. Reduce file size by up to 90% without visible quality loss. Free, private, runs in your browser.
Resize Image
Resize any image online by pixels or percentage. Free, private, and instant — no upload needed, and the original aspect ratio is preserved.
Convert Image Format
Convert images between PNG, JPG, and WebP instantly. Free, private, and fast — everything runs in your browser and no files are ever uploaded.
Explore all Image Tools.