🔲 Round Image Corners Tool
By ToolNimba Editorial Team · Updated 2026-06-19
PNG, JPEG, WebP, GIF or BMP. Files stay on your device, nothing is uploaded.
Radius is set as a percentage of the shorter side, so corners stay even on any aspect ratio. 50% gives a full pill or circle.
Preview
Choose an image to begin. All processing happens locally in your browser.
This tool rounds the corners of an image and gives you back a PNG with the corners cut away as transparent. Upload a picture, drag the radius slider (set as a percentage of the shorter side so corners stay even on any shape), watch the live preview on a checkerboard, and download. The whole thing runs in your browser on a canvas, so your image is never uploaded to a server.
What is the Image Rounded Corners?
Rounding the corners of an image means clipping each corner along a quarter-circle arc so the hard right angle becomes a smooth curve. The curve is defined by a single number, the corner radius: the distance from the corner at which the curve begins. A radius of 0 leaves the corners square; a large radius produces a soft, pill-like shape; and when the radius reaches half of the shorter side the result becomes a full circle (for a square image) or a stadium / pill shape (for a rectangle). This tool measures the radius as a percentage of the shorter side, so a 20% setting looks the same whether your image is a tall portrait or a wide banner.
The key to a clean result is the output format. The four corners that get trimmed have to become see-through, and only formats with an alpha channel can store transparency. PNG can, so this tool always exports a PNG. If it exported a JPEG instead, the trimmed corners would fill with a solid color (usually white or black) rather than vanishing, which defeats the purpose. That is also why the preview sits on a grey-and-white checkerboard: the checkerboard is the standard way to show which parts of an image are transparent, so you can see exactly what will be cut away before you download.
Under the hood the work happens on an HTML canvas. The tool builds a rounded-rectangle path using line segments for the straight edges and arcs for the corners, sets that path as a clip region, then draws your image inside it. Anything outside the path is simply never painted, leaving those pixels transparent. Because the source image is drawn at its full natural resolution, the rounded version keeps the same pixel dimensions and sharpness as the original. Doing this with CSS border-radius only rounds the corners visually in a browser; it does not change the actual image file, so a screenshot or a download would still show square corners. Baking the rounding into the PNG, as this tool does, makes it portable to anywhere that displays an image.
When to use it
- Creating a rounded avatar or profile picture that stays rounded wherever it is displayed, not just in a browser.
- Rounding product photos, thumbnails or screenshots for a slide deck, PDF or document where CSS is not available.
- Making a circular logo or badge by setting the radius to 50% on a square image.
- Softening the corners of an image for an email signature or newsletter, where many clients strip CSS styling.
How to use the Image Rounded Corners
- Click Choose an image and pick a PNG, JPEG, WebP, GIF or BMP file from your device.
- Drag the corner radius slider, or tap a preset, to set how rounded the corners should be.
- Check the live preview on the checkerboard to see which corners will become transparent.
- Click Download PNG to save the result with its rounded, transparent corners.
Formula & method
Worked examples
A square 400 x 400 px avatar with the radius set to 20%.
- Shorter side = min(400, 400) = 400 px
- radius = 20 ÷ 100 x 400 = 80 px
- 80 px is less than half the shorter side (200 px), so it is used as-is
- Each corner is clipped along an 80 px quarter-circle arc
Result: A 400 x 400 PNG with gently rounded 80 px corners and transparent corner pixels.
A wide 1200 x 600 px banner with the radius set to 50%.
- Shorter side = min(1200, 600) = 600 px
- radius = 50 ÷ 100 x 600 = 300 px
- Half the shorter side is also 300 px, so the radius is capped at 300 px
- The two short ends become full semicircles, giving a stadium (pill) shape
Result: A 1200 x 600 PNG shaped like a pill, with both short ends fully rounded.
Corner radius percentage and the look it produces
| Radius (% of shorter side) | Effect | Good for |
|---|---|---|
| 0% | Square corners (no change) | Keeping the original shape |
| 5% to 10% | Subtle softening | Cards, screenshots, product shots |
| 15% to 25% | Clearly rounded | App icons, thumbnails, avatars |
| 30% to 45% | Soft, capsule-like | Buttons, pill badges |
| 50% | Circle (square image) or pill (rectangle) | Round avatars, circular logos |
Why PNG is used for the output
| Format | Supports transparency? | Rounded corners look like |
|---|---|---|
| PNG | Yes (alpha channel) | Clean, see-through corners |
| JPEG | No | Corners fill with a solid color |
| WebP | Yes | Clean, but less universally supported |
| GIF | Only 1-bit on/off | Hard, jagged corner edges |
Common mistakes to avoid
- Saving as JPEG and losing the transparency. JPEG has no alpha channel, so the trimmed corners cannot be transparent. Convert to JPEG and the corners fill with white or black instead of disappearing. This tool exports PNG on purpose, keep it as PNG to preserve the rounding.
- Expecting CSS border-radius to change the file. Setting border-radius in CSS only rounds the image where that CSS applies, usually one web page. The image file itself is unchanged, so a screenshot, download or paste elsewhere shows square corners. Baking the rounding into the PNG makes it travel with the file.
- Setting a radius larger than the image can hold. A radius bigger than half the shorter side would make the corner arcs overlap. The tool caps the radius at half the shorter side, so the largest meaningful value is 50%, which already gives a full circle or pill.
- Placing the rounded image on a colored background by surprise. The transparent corners show whatever is behind the image. On a white page they look white; on a dark page the rounding will be obvious. Preview it against the background you will actually use.
Glossary
- Corner radius
- The distance from a corner at which the rounding curve begins. A larger radius means a more rounded corner.
- Alpha channel
- The part of a pixel that stores transparency. PNG and WebP have one; JPEG does not.
- Transparency
- Pixels that are see-through, letting the background behind the image show through. The trimmed corners become transparent.
- Clip path
- A shape used as a mask on a canvas. Only pixels inside the shape are drawn, so the corners outside it stay empty.
- Checkerboard
- The grey-and-white grid shown behind the preview. It is a convention for indicating transparent areas.
Frequently asked questions
How do I round the corners of an image?
Upload the image, drag the corner radius slider to choose how rounded you want the corners, check the preview, and click Download PNG. The downloaded file has the corners clipped away as transparent pixels, so the rounding is part of the image itself.
Why is the output always a PNG?
Rounding corners requires the trimmed areas to be transparent, and only formats with an alpha channel can store transparency. PNG supports it and is widely compatible, so it is the safe default. A JPEG would fill the corners with a solid color instead of leaving them see-through.
Can I make a perfectly circular image?
Yes. Set the radius to 50% on a square image and the four corners round all the way in to form a circle. On a rectangular image, 50% gives a stadium or pill shape, with the two shorter ends fully rounded.
Will rounding the corners reduce the image quality?
No. The image is drawn at its full original resolution and the corners are simply clipped, so the visible pixels stay exactly as sharp as the source. The output keeps the same width and height as the input.
Is my image uploaded to a server?
No. Everything happens locally in your browser using the FileReader and canvas APIs. The file never leaves your device, which keeps private photos and screenshots private.
The corners look white instead of transparent. What happened?
That usually means the PNG is being displayed on a white background, or it was re-saved as a JPEG which has no transparency. Open the PNG over the checkerboard preview here, or on a colored background, to confirm the corners are genuinely transparent.