Round the corners of an image

The radius can be set in px or as a percent of the shorter side. Percent is the better choice for a batch of different sizes, because every image ends up with the same proportion of curve; px is better when a design specifies an exact value, such as 16 px corners to match the cards on a web page.

The largest possible radius is half the shorter side, and the tool clamps to it. At 50 %, a square image becomes a circle and a rectangle becomes a pill shape with fully round ends. Between about 3 and 10 % the corners read as softened rather than as a shape of their own, which suits screenshots and photos alike.

PNG and WebP store an alpha channel, so the cut-off corners are transparent and the image sits cleanly on any background. The curve is anti-aliased: pixels along the edge are partly transparent, so there is no staircase effect.

JPG has no transparency. If you pick JPG, the corners are filled with a colour you choose, white by default. Match it to the page or slide the image will sit on, for example #333333 for a dark deck, and the corners will look cut out even though they are solid.

File size follows the format. In our test a 1200 × 800 JPG photo of 224,092 bytes became 1,467,996 bytes as a rounded PNG, 180,246 bytes as WebP and 223,484 bytes as JPG. PNG is lossless and large for photos, so for a photo on a web page WebP keeps the transparency at a fraction of the size.

On your own website, the CSS property border-radius rounds an image without touching the file. Many places do not let you style images that way. Outlook for Windows renders HTML email with the Word engine and ignores border-radius, GitHub strips style attributes from README files, and marketplaces, chat apps and document editors show the picture as uploaded. Rounding the pixels themselves is the reliable way to get the same corners everywhere. The image keeps its original width and height; only the corner pixels change.