Percent or pixels
A percentage radius is measured against the short edge, so it scales with the image: 50% on a square is a perfect circle at any size, and roughly 12% gives the softly rounded square that phone app icons use. Export the same artwork at 400 px and at 800 px and both look identical, which is what you want when one design has to survive several output sizes.
A pixel radius is fixed. That is the right choice when several images have to match each other — a row of screenshots in a document all rounded by 8 px looks deliberate in a way that three different percentages do not. Note that a 50% radius on a non-square image produces an ellipse rather than a circle, exactly as border-radius: 50% does in CSS.
Making a circular avatar
Portraits are usually taller than they are wide, so cropping straight to a circle removes chin and forehead. The order that works: crop to 1:1 with the subject positioned where you want it, bring that here, turn on the centre square crop as a safety net, and set the radius to 50%. A white border of 6 to 10 px keeps the edge of the photograph legible against a dark background, and a shadow at 0/8/20 with 25% opacity lifts it off the surface without looking like a 2008 web design. Most services want somewhere between 200 and 800 px, so 400 is a sensible output size.
Why the file is always PNG
Rounding the corners empties four regions of the canvas. Those regions have to be transparent rather than white, otherwise the image only looks right on one background colour. JPEG cannot store transparency at all, so the format is not a choice here.
The cost is size: a photograph in PNG is several times the bytes of the same photograph in JPEG, because PNG is lossless and photographic data does not compress losslessly. For web use that is the argument for using the CSS instead and keeping the original JPEG. For a slide deck or a printed page, where the shape has to be in the pixels, take the size hit and keep the output dimensions modest.
Reading the shadow values
Five numbers define the shadow: horizontal offset, vertical offset, blur, colour and opacity, in the same order CSS box-shadow uses. Zero horizontal with a positive vertical reads as light from above, which is what almost everything wants. Both offsets at zero with a large blur gives an even halo instead — useful for lifting an element off a busy background, wrong for suggesting depth. Blur is how far the edge spreads; opacity around 25% is unobtrusive in a document, and past 50% it turns muddy in print.
One thing to check before you export
Look at what sits at the very edge of the frame. A rounded corner cuts a surprisingly large bite out of the picture at 50%, and anything you cared about in a corner — a logo, a signature, part of a face — is gone. If the composition needs the corners, reduce the radius or add padding to the source image before you bring it here, because nothing downstream can put it back.
Questions people ask
Does the image get uploaded?
No. The file is opened from disk by the browser, drawn into a canvas in this page, and encoded back to a PNG that the download link points at. There is no request and no server component. The verification is straightforward: open the network panel before choosing a file, or disconnect from the network and use the tool anyway.
The output PNG is much larger than my source JPEG.
Expected. PNG is lossless, and photographic content is close to incompressible without loss, so a photograph typically lands several times heavier than the JPEG of the same picture. The transparency in the corners is what forces PNG, so the format cannot change. Keep the output dimensions to what the destination actually displays, or use the CSS route on the web and leave the photo as a JPEG.
White is showing through inside the border.
The source is a PNG with transparent areas. This tool paints the shape white before drawing the image, so anything transparent in the source shows that white. Fill the background in the source image first if you want a different colour behind it — the background colour field here only controls the area outside the rounded shape.
Can I get a shape other than a rounded rectangle?
No. The mask is a rounded rectangle with a single radius on all four corners, which covers circles, squircles and plain rounded frames. Per-corner radii, ellipses on non-square images beyond what 50% gives you, and arbitrary paths are outside what this does — those belong in an image editor.