Round Image Corners
Round the corners of an image — radius in px or %, each corner on or off, circle crop, optional border — as a transparent PNG or WebP, or JPEG on a background.
The image with rounded corners or as a circle to download, the effective radius in pixels, and the one-line CSS that gives the same look on a web page.
Example: 10 % on a 640 × 360 photo is a 36 px radius; 80 px on a 100 px side is capped at 50 (fully round); top corners only with a 4 px red border; the circle option on a 300 × 200 image gives an ellipse.
A clip path,
then the picture.
How the corners are cut, what the radius means, and where CSS does the same job.
Clipping
A rounded-rectangle path is built with arcTo at each corner you switched on (or an ellipse for the circle option), the canvas is clipped to it, and the image is drawn inside; the border, if any, is stroked along the same path from the inside. Outside the path the canvas stays transparent, which PNG and WebP keep and JPEG fills with the background colour.
Radius
In pixels the radius is used as typed; in percent it is a share of the shorter side, so 50 % on a square is a circle and 50 % on a landscape photo gives fully round ends (a pill). Anything above half the shorter side is capped there — it cannot be rounder. Corners can be rounded individually for tabs, cards and bubbles.
CSS instead
On a web page the same look needs no new file: border-radius on the img element, shown on the page, clips the rendering and keeps the original bytes. Save the rounded PNG when the image goes somewhere CSS cannot follow (e-mail, chat, documents). Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- Canvas 2D clip path (arcTo rounded rectangle or ellipse) then drawImage; PNG / WebP keep transparency, JPEG fills the corners; CSS border-radius per CSS Backgrounds Level 3
Last reviewed 22 September 2026. How results are checked: How we verify.