تصویر کے گوشے گول کریں

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.