Round the corners of an image
Some places let you round corners with CSS; a slide deck, a PDF, an email or a marketplace listing does not. This tool bakes the rounded corners into the image itself and saves a transparent PNG, so the corners show whatever is behind them. There is also a circle option for avatars.
How to use the Round Image Corners
- Add your images — avatars, product shots, screenshots for a deck.
- Choose a rounded rectangle and a radius, or switch to circle for a profile picture.
- Keep transparent corners for use over any background, or pick a colour to match a fixed one.
- Download the PNG or WebP files.
Why bake corners into the file
On a web page, border-radius is always the better answer: it costs nothing, stays sharp at every zoom level and can be changed later. Baked-in corners are for everywhere CSS does not reach — PowerPoint and Keynote slides, PDF exports, email templates where CSS support is unreliable, marketplace and app-store listings that display a fixed image, README files on GitHub, and design hand-offs where the recipient will not be styling anything.
Transparency is the whole point
A rounded corner has to be see-through, or it is not rounded — it is a rectangle with coloured triangles in the corners that only looks right on one exact background. That is why the default output here is PNG with a genuine alpha channel, and why JPG is not offered at all: JPEG has no transparency, so it cannot represent this. If you know the background colour and it will never change, switch transparency off and set the colour; the file will be a little smaller and will work in places that mishandle alpha.
Radius as a percentage
The radius is given as a percentage of the shorter side, which means one setting works across a batch of different sizes. On a 1000 × 600 image, 12% gives a 72-pixel radius. Useful reference points: 4–8% is the subtle, card-like rounding used by most interfaces; 12–20% reads as clearly rounded; 50% on a square produces a perfect circle. Choosing the circle shape does the same thing regardless of the radius, and on a non-square image it produces an ellipse filling the frame — crop to a square first if you want a true circle.
Edge quality
Clipping a canvas to a path gives visibly stepped, aliased corners in several browsers. This tool instead draws the image, then composites a filled rounded path over it in destination-in mode, which keeps only the pixels inside the shape and leaves a smooth, anti-aliased edge with partial alpha along the curve. Zoom in on the result and the curve should be clean, with no staircase.
File size
A rounded PNG is usually slightly larger than an opaque one of the same image, because the alpha channel has to be stored. Choosing WebP output typically cuts the file by 60–80% while keeping the transparency, which is worth it anywhere the destination supports it.
Frequently asked questions
Why can I not save as JPG?
JPEG has no alpha channel, so it cannot store a transparent corner. Switch transparency off and pick a colour if you need a JPG-like flat file, or use PNG or WebP.
How do I make a circular profile picture?
Choose the circle shape. On a non-square image the result is an ellipse, so crop or resize to a square first for a true circle.
Will the corners look jagged?
No. The shape is composited rather than clipped, which leaves a smooth anti-aliased edge instead of a stepped one.
Should I use this for a website?
Usually not — CSS border-radius is sharper, smaller and reversible. Bake the corners in only when CSS is unavailable, such as in slides, PDFs or email.
Privacy
This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.
Last updated 2026-09-23.