Rounded Corners for Avatars, Icons, and Cards

Corner radius is a small number with a loud voice. It is most of the difference between an interface that feels friendly and one that feels technical, and it is the entire difference between a profile picture that looks intentional and one that looks pasted in. Our rounded corners tool exposes it as a single slider, and this article is about where to set it.

What a radius communicates

Sharp corners read as precise, dense, and serious - dashboards, data tables, financial and developer tooling. Generous radii read as soft, approachable, and consumer-facing. A fully circular crop reads as a person, which is why nearly every social platform frames avatars as circles and why a square photo in a circular slot immediately looks wrong.

The important discipline is consistency. One radius, or a small scale of two or three related values, applied everywhere. Mixed radii across a set of images is one of the most reliable signals that something was assembled rather than designed.

Radius by use case

The slider is measured in pixels of the source image and its maximum is half the shorter side, because beyond that the arcs would overlap. Setting it to maximum on a square image gives a perfect circle.

Use	Radius guidance	Effect
Circular avatar	Slider at maximum on a square image	A perfect circle for social and team profiles
App or launcher icon	Roughly 20 to 25 percent of the width	The familiar rounded-square icon silhouette
Card or panel image	Match the container, often 8 to 16 px at display size	Image sits flush inside the card without a visible seam
Thumbnail or list row	4 to 8 px at display size	Softens the edge without reading as decorative
Screenshot in a doc or deck	8 to 12 px at display size	Separates the capture from the page around it

Think in percentages, not pixels

This is the mistake that produces inconsistent sets. A 24 pixel radius is a gentle curve on a 1200 pixel card and an almost-circle on a 100 pixel thumbnail. If you are rounding several images that will be displayed at the same size, decide the radius as a fraction of the shorter side and compute the pixel value per image, rather than reusing one number across sources of different dimensions.

The same applies in reverse. If you round a 1000 pixel image at 40 pixels and then downscale it to 200 pixels for display, the visible radius scales down to 8 pixels. Round at the resolution you intend to ship, or account for the reduction.

Circles need square sources

Dragging the slider to maximum on a non-square image gives you a stadium shape - a rectangle with semicircular ends - not a circle. For a true circular avatar, crop to 1:1 first with the image cropper, then round. Crop with the circle in mind: the corners of the square are about to be discarded, so anything you care about has to sit inside the inscribed circle, and a face should be centred with a little more room above than below.

Why the export is a PNG

Rounding a corner does not delete those pixels, it makes them transparent, and only a format with an alpha channel can record that. PNG has one; JPEG does not. Save a rounded image as JPEG and the transparent corners collapse to a solid colour - usually black or white - which produces the familiar ugly result of a rounded photo with square shoulders. The tool exports PNG for exactly this reason.

The practical consequence is file size. A rounded photograph as a lossless PNG can be several times larger than the JPEG it came from. If size matters and the destination has a known solid background, one option is to skip transparency entirely and let CSS or the platform do the rounding. If you need both transparency and small files, WebP supports alpha too and compresses photographs far better than PNG - see JPG vs PNG vs WebP for that tradeoff.

Bake it in, or use CSS?

On a web page you control, border-radius in CSS is almost always the better answer. It costs nothing in file size, it is trivially changed later, and it scales with the element. Baking the radius into the file makes sense when you cannot apply CSS to the rendering surface:

Slide decks, documents, and PDFs.
Email templates, where CSS support is unreliable and inconsistent.
Third-party platforms and marketplaces that accept an image and render it their own way.
App store and launcher icons, where the asset is expected to arrive pre-shaped.
Images that will be composited into another image.

One caution on app icons. Apple's icon shape is a squircle, a continuously curved superellipse rather than a plain rounded rectangle, so a standard corner radius approximates it but does not match it exactly. Several platforms also apply their own mask to whatever you supply, in which case you should submit a full-bleed square and let them shape it - a pre-rounded icon that then gets masked again ends up with clipped corners.

Done locally, as always

The rounding is a canvas clip path applied in your browser: the image is read from disk with the local file API, drawn inside a rounded rectangle path, and downloaded straight from the canvas. Profile photos and personal pictures are precisely the category that should not be passing through somebody else's server for an operation this trivial.