On the web you would normally do this with a CSS border radius and leave the file alone. Baking the curve into the image itself is the answer everywhere CSS does not reach: email templates, slide decks, PDF exports, app store screenshots, README files on code hosts and any design tool that places a raw bitmap.
The clip is computed on a canvas inside your browser. Nothing is uploaded, so a product photograph or an unreleased screenshot stays on your machine while you experiment with the radius.
When to round the corners in the file itself
Reach for a baked in curve whenever the surface that will display the image cannot apply its own styling. Email clients strip or ignore large parts of CSS, so a rounded corner image in a newsletter has to arrive already rounded. Presentation software, word processors and PDF generators all place bitmaps as rectangles unless the source file says otherwise.
The opposite is true on a normal web page. If you control the CSS, a border radius is better because it stays crisp at any device pixel ratio, costs nothing in file size and can be changed later without re exporting anything.
- Round the file when the image goes into an email template.
- Round the file for slide decks, documents and PDF exports.
- Round the file for app store screenshots and marketing assets.
- Round the file for avatars that will be shown by software you do not control.
- Use CSS instead whenever the image is placed on a page you own.
Why the output has to be a PNG
The corners you cut away have to become something. In a format with an alpha channel they become nothing at all, which is what lets the rounded shape sit on any background. In a format without one they become a solid colour, and the moment the surrounding background is a different colour the illusion collapses into four visible triangles.
JPG has no alpha channel, so this tool never offers it. Every export is a PNG, which stores eight bits of alpha per pixel and is supported everywhere. That also means the corner curve is antialiased properly, with partially transparent pixels along the arc rather than a hard staircase edge.
A useful consequence is that transparent corners png files composite correctly over photographs, gradients and dark mode backgrounds without any further work.
Choosing a corner radius
The radius here is a percentage of the shorter side of the image rather than a pixel value, which means the same setting produces a visually consistent curve whether you are rounding a 200 pixel avatar or a 3000 pixel screenshot. At 50 percent a square image becomes a perfect circle, since the arcs on adjacent corners meet exactly at the midpoint of each edge.
For interface style cards, somewhere between 3 and 8 percent reads as a modern rounded rectangle. Between 12 and 20 percent gives the softer squircle look used by mobile app icons. Above 30 percent the shape stops reading as a rectangle at all and starts to read as a lozenge.
How this round image corners tool works
The tool builds a path on the canvas 2D context out of four straight lines and four quadratic arcs, calls clip to make that path the drawing region, then draws your decoded image through it. Everything outside the path is simply never written, so those pixels keep the alpha value of zero the canvas started with.
Because the clip happens before the draw rather than after, there is no erase step and no colour fringing from a partially removed background. The arc is rasterised with the browser antialiasing that the canvas specification requires, which is the same code path that produces smooth curves everywhere else on the page.
The whole operation is one draw call. Even on a very large photograph the round image corners tool finishes faster than the file dialog took to open, and the result is encoded straight to a PNG blob for download.
Rounding only some of the corners
Each corner has its own switch. Rounding just the top two is the standard treatment for a card header image that sits above a block of text, since the bottom of the picture is meant to meet the card body with a straight edge.
Rounding a single corner is rarer but useful for chat bubbles and callouts, where three soft corners and one sharp one point back toward the speaker. Switch every corner off and the tool simply re encodes the image as a PNG, which is a quick way to add rounded corners to a png later without touching the pixels now.
| Radius | Look | Typical use |
|---|---|---|
| 1 to 2 percent | Barely softened | Screenshots in documentation |
| 3 to 8 percent | Modern rounded rectangle | Cards, thumbnails, email images |
| 12 to 20 percent | Squircle | App icons and marketing assets |
| 50 percent on a square | Perfect circle | Avatars and profile pictures |
| 50 percent on a rectangle | Stadium shape | Pills, badges and banners |
How to round the corners of an image
- 1
Add your image
Drop a PNG, JPG or WebP onto the drop area, or click it to browse. The file stays on your device.
- 2
Set the radius
Move the radius slider. 3 to 8 percent suits cards, 12 to 20 percent gives an app icon curve, 50 makes a circle.
- 3
Choose which corners to round
Leave all four switched on, or turn some off for card headers, chat bubbles and other one sided shapes.
- 4
Round and download
Press round corners, check the preview against the checkerboard, then download the PNG.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.clipThe clipping call that restricts drawing to the rounded rectangle path, leaving the corners untouched.developer.mozilla.org
- W3C: Portable Network Graphics specificationThe PNG specification, including the alpha channel that makes genuinely transparent corners possible.w3.org
- WHATWG: HTML canvas specificationDefines path construction, clipping and the antialiasing behaviour that keeps the corner arcs smooth.html.spec.whatwg.org
Frequently asked questions
Common questions about the round image corners tool.
Because JPG has no alpha channel. The corners removed by the curve would have to be filled with a solid colour, which only looks right on a background of that exact colour. PNG keeps them genuinely transparent instead.
The pixel dimensions stay identical to the original. Only the corner pixels change, from opaque image content to fully or partially transparent. File size usually falls slightly because the transparent areas compress well.
Fifty percent on a square image. On a rectangle the same setting produces a stadium shape with semicircular ends, because the radius is measured against the shorter side and the longer side keeps a straight middle section.
Yes. The canvas clip path is rasterised with antialiasing, so pixels along the arc carry intermediate alpha values. The curve therefore looks smooth rather than stepped, even at small avatar sizes where a hard edge would be obvious.
Use CSS whenever you control the page, because it stays sharp at every screen density and can be changed without re exporting. Use a baked in curve for email, documents, slide decks and anywhere else CSS is unavailable.