Round Image Corners

How to use 4 steps
  1. Press Choose an image.
  2. Pick a Shape and set the Corner radius.
  3. Choose what goes behind the corners: transparent or a colour.
  4. Press Round corners, then download the result.
Processed entirely in your browser. Nothing is uploaded.
A share of the shorter side, so it looks the same at any size.
Result

JPEG has no alpha channel, so a transparent corner cannot survive it — choosing JPEG forces the solid background, and the tool says so rather than silently filling the corners with black. The circle option crops to the largest circle that fits, taken from the centre; a portrait photo will lose its top and bottom. The mask is drawn once and composited, so the edge is anti-aliased rather than stepped.

How this tool works

The shape is cut by drawing it as a path on the canvas and keeping only what falls inside it. Three shapes are available: rounded corners with a radius you set, a circle inscribed in the image, and a squircle — the continuous curve used for app icons on iOS and increasingly elsewhere, which reads as rounder than a rounded rectangle without the visible point where a circular corner meets a straight edge.

What sits outside the shape is either transparent or a colour you choose. That decision drives the format: transparency needs PNG or WebP, and choosing JPEG flattens the image onto the colour first, since JPEG has no alpha channel. A circle on a non-square image is inscribed in the shorter dimension and centred.

Getting a clean edge

  • Transparency means PNG or WebP: a rounded JPEG is a rectangle with coloured corners. It will look correct only against a background of exactly that colour, and wrong everywhere else.
  • Match the radius to the size: a radius that looks right on a large image is barely visible on a thumbnail. Corners are usually judged as a proportion of the image rather than in absolute pixels.
  • The squircle is the app-icon shape: if the result is going somewhere that already applies its own rounding, exporting a square image is safer — two roundings applied one after the other look wrong.
  • Rounding is destructive here: the corners are gone from the file. Where the display can round it instead, a CSS border radius keeps the original intact and adapts to any size.

Three shapes, cut on the canvas

The shape is drawn as a path and only what falls inside it is kept. Rounded corners take a radius you set; a circle is inscribed in the image and centred; and the squircle is the continuous curve used for app icons on iOS and increasingly elsewhere.

The squircle is worth knowing about. It reads as rounder than a rounded rectangle of the same radius, and it has no visible point where a circular corner meets a straight edge — which is why platform icon shapes moved to it. The [msm_tool slug="round-corners"] produces all three.

Transparency decides the format

What sits outside the shape is either transparent or a colour you choose, and that determines what you can export to.

Transparency needs PNG or WebP. Choosing JPEG flattens the image onto the colour first, because JPEG has no alpha channel — so a "rounded" JPEG is a rectangle with coloured corners. It looks correct against a background of exactly that colour and wrong everywhere else, which is the single most common complaint about rounding an image.

Match the radius to the display size

A radius that looks right on a large image is barely visible on a thumbnail, because corners are judged as a proportion of the shape rather than in absolute pixels.

If the same file serves several sizes, it needs several radii — or none, and a CSS radius instead.

Do not round twice

If the result is going somewhere that applies its own rounding — an app icon slot, a social avatar, a card component with a border radius — export a square image and let the destination do it.

Two roundings applied one after the other produce a visibly wrong shape: a pinched corner where the two curves disagree. This is why platform guidelines ask for square icon uploads even though the icons appear rounded.

A circle on a rectangle crops the long edges

The circle is inscribed in the shorter dimension and centred, so a landscape photograph loses its sides. If the subject is not centred, it will not be in the circle — crop to a square first with the subject where you want it, then round.

CSS where you control the page

A border-radius in the stylesheet leaves the original file intact, adapts to every display size, costs nothing, and can be changed without re-exporting anything. It is the right answer for anything on your own site.

Round the file when the image is going somewhere you do not control: an email, a marketplace listing, a document, a platform that will not let you style it. That is a real set of cases, and it is smaller than the number of times people round images by habit.

It is destructive

The corners are gone from the exported file. Keep the original — corner radii are a style decision, and style decisions get revisited more often than almost anything else.

Frequently Asked Questions

Specific to the Round Image Corners. Broader questions about this category are answered on the category page.

The output format was JPEG, which has no transparency, so the outside was flattened onto a colour. Choose PNG or WebP.
The continuous rounded shape used for app icons. It reads as rounder than a rounded rectangle and has no visible point where the curve meets the straight edge.
Enough to be visible at the size the image will be shown. Corners are judged proportionally, so a thumbnail needs a much smaller radius than a banner.
CSS where you control the display — it is non-destructive and adapts to any size. Round the file when it is going somewhere you do not control.
It is inscribed in the shorter dimension and centred, so the long edges are cropped away.

Subscribe to receive notifications about new tools, features, and productivity tips.