Rounding an image's corners means cutting pixels away at each corner — and something has to occupy that space. That "something" is transparency, and this single fact decides everything else.

The Format Rule

  • PNG — full alpha support. The safe choice for a rounded image that will sit on unknown backgrounds.
  • WebP — also supports alpha, and is typically 60–80% smaller than PNG. Prefer it unless you need to support very old software.
  • JPG — has no alpha channel. Rounding the corners of a JPG fills them with a solid color, usually white. On a white page it looks correct; on any other background you get four ugly white triangles.

If a tool "rounds" your JPG and it looks fine locally, test it on a dark background before publishing. That's where the flattening becomes obvious.

Radius Values That Look Right

Radius is proportional to the element's size, not a universal number:

  • Subtle card / thumbnail: 1–2% of the width (roughly 8–16 px on a 800 px image).
  • UI card convention: 12–24 px at display size — matching what most design systems use.
  • Avatar: fully round is 50% of the width, i.e. a circle. Anything between 20% and 45% tends to look indecisive.
  • App icon (iOS "squircle"): about 22% of the icon size. Note that iOS and most launchers apply their own mask, so submit a square icon with no rounding and let the OS do it — pre-rounding produces a double-rounded, shrunken icon.

Often You Shouldn't Edit the Image at All

On your own website or app, use border-radius in CSS instead. Benefits: the source image stays rectangular and reusable, the radius can respond to screen size, and you can keep the smaller JPG format for photos. Bake the rounding into the file only when the image will be used somewhere you can't add styles — a PDF, an email signature, a slide deck, a third-party marketplace.

Practical Workflow

  1. Crop to the final aspect ratio first — rounding is relative to the final edges.
  2. Apply the radius and export as PNG or WebP with transparency preserved.
  3. Don't convert the result to JPG afterwards for "smaller files"; that's exactly the step that reintroduces white corners. If size is the concern, use WebP.
  4. Check the result on both a white and a dark background before you ship it.