Round Image Corners
Round the corners of an image with an adjustable radius and export a transparent PNG. 100% client-side.
Loading tools...
How rounding image corners works
The tool draws your uploaded image onto an HTML canvas, then traces a rounded-rectangle path sized to the canvas and uses it as a clipping region before drawing the pixels. Everything outside that path is left transparent, so the exported PNG has genuinely rounded — not just visually cropped — corners that composite cleanly over any background.
The radius slider is expressed as a percentage of half the image's shorter dimension rather than a fixed pixel value, so the same setting looks proportionally correct whether you upload a small icon or a large photo. Drag it all the way to 100% to turn a square image into a circle, or a rectangular one into a stadium/pill shape.
Because the output relies on alpha transparency, download it as PNG (the only format offered here) rather than JPEG, which has no alpha channel and would fill the rounded-off corners with a solid color. Everything happens locally via the Canvas API — the image is never uploaded to a server. To crop to a specific rectangle first, try the Image Cropper, or use the Favicon Generator if you need square icon assets afterward.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Rounding an image's corners so it matches a card's radius.
- Producing a transparent PNG with rounded corners for a layout.
- Rounding an avatar where CSS cannot reach, such as inside an email.
- Preparing an image for a context that cannot apply a border radius.
- Producing a rounded thumbnail for an email.
Frequently Asked Questions
- Why round corners in the image rather than in CSS?
- Because CSS rounding only exists in a browser. An image going into a PDF, a slide, an email or an app that does not style it needs the corners baked into the pixels — which requires transparency, and therefore PNG or WebP output.
- How is the rounding actually done?
- A rounded rectangle path is drawn on a canvas, set as the clipping region, and the image drawn through it. Everything outside becomes transparent — which is why saving as JPEG afterwards fills the corners back in with a solid colour.
- Why do the corners look jagged?
- Insufficient anti-aliasing on the clip path, which is worse at small sizes and large radii. Rendering at twice the size and scaling down is the reliable fix, since the downscale averages the edge pixels into a smooth curve.
- What radius looks right?
- Roughly 5–10% of the smaller dimension for a subtle rounding, and exactly half for a circle. Anything above half the smaller side is clamped, because two adjacent corner arcs cannot overlap — which is why an extreme radius silently stops increasing.
- Is squircle rounding different?
- Yes — a superellipse rather than a circular arc, which is what iOS icons use. The curvature is continuous rather than changing abruptly where the arc meets the straight edge, which is why an iOS icon looks subtly smoother than a plain rounded rectangle.
Common errors and gotchas
- Exporting as JPEG, which has no alpha channel, so the corners become a solid fill.
- Rounding at a radius that looks right on screen but wrong at the display size.
- Re-encoding a lossy source, which adds artefacts for a change that should be free.
- Baking the radius in when CSS could apply it, which then cannot be changed.
- Losing the original by overwriting it with the rounded copy.