How to Round Image Corners

Rounded corners are a modern design default — cards, avatars, app icons, product tiles. Most of the time the browser handles them with a single CSS border-radius property, but sometimes you need the corners baked into the image file itself: for email, where CSS support is patchy; for exports to PDFs and presentations; for thumbnails rendered outside a styled environment; and for any case where you want transparent corners around a non-rectangular shape. This guide covers when to bake corners into the pixels, when to leave them as CSS, and how to pick the right radius for avatars, cards, and circular crops.

CSS radius versus baked-in corners

If you control the HTML and CSS, border-radius is almost always the right answer. It’s a single line, it’s resolution-independent, and you can change the shape without re-exporting the image.

.card img {
  border-radius: 12px;
  overflow: hidden;
}

You need baked-in corners when the consuming environment strips CSS (email clients like Outlook), renders outside a browser (office docs, messaging apps), or needs a true image file with an alpha channel (PNG/WebP with transparent corners).

Radius in pixels versus percent

A fixed pixel radius (e.g. 12 px) keeps the same physical roundness regardless of the image size. A 200 px avatar and a 1000 px card both get 12 px of curve — visually tight on the big one, pronounced on the small one.

A percentage radius scales with the image: 10% of the shorter side. A 200 px square at 10% gets 20 px of curve; a 1000 px square at 10% gets 100 px. Use percent when you want the shape to feel consistent across sizes — think app icons where the same squircle shape appears at 16, 32, 64, 128, and 512 px.

Going full circle: 50% radius

A border-radius of 50% on a square produces a perfect circle; on a rectangle it produces a pill or ellipse. This is the standard shape for user avatars. When baking it into a file, you need both a square source image and a format that supports transparency (PNG, WebP, AVIF). JPEGs cannot hold a circular transparent background — they’ll fill the corners with whatever background color you specify, usually white.

If you’re going to paste a circular avatar onto an unpredictable background, always export PNG or WebP. If you know the placement background is solid white and unchanging, JPEG with white corner fill works and saves bytes.

Transparency: PNG, WebP, AVIF

Transparent rounded corners require an alpha channel. Your format options:

• PNG — ubiquitous support, lossless, larger files. Safe default.
• WebP — 25–35% smaller than PNG at similar quality, supported in all modern browsers.
• AVIF — even smaller, slower to encode, growing support.
• GIF — supports only binary transparency (fully opaque or fully transparent), so the corner edge will look jagged. Avoid for this.

JPEG is simply not an option for transparent corners; it has no alpha channel.

Anti-aliasing the curve

A round corner against a transparent background needs anti-aliasing: partially-transparent pixels along the curve edge so it doesn’t look jagged. Good tools do this by default; bad ones produce a stair-step edge that’s obvious at small sizes.

If your exported image shows visible jaggies, check whether the tool is exporting at the target size or at a reduced size and then letting the browser scale up. Rendering at the final size with anti-aliasing on gives the cleanest curve.

Picking a radius for the job

• Photo cards in a feed: 8–12 px for a subtle modern look, 16–20 px for a softer feel.
• App icons (iOS style): ~22.37% of the side (the iOS “squircle” formula), or use a dedicated squircle tool.
• Avatars: 50% for circle, or 25–35% for a rounded-square look.
• Product images: 4–8 px for near-rectangular with a hint of softness.
• Hero banners: usually 0 px (sharp edges) or 12–16 px if they’re inset in a colored container.

Individual corner radii

Not all corners need the same radius. A common pattern for photo-text cards is to round only the top two corners (where the photo is) and leave the bottom square so the text section below aligns cleanly. The CSS:

img.card-top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

For baked-in asymmetric corners, pick a tool that exposes all four corner radii individually.

Elliptical (non-circular) corners

A border radius can actually accept two values per corner: one for the horizontal curve, one for the vertical curve, producing an elliptical corner. In CSS:

border-radius: 40px / 20px; /* wide-short ellipse at every corner */

Elliptical corners are rare in baked image form but useful for distinctive brand shapes or large hero images that shouldn’t look like they have an identical curve to every card on the page.

Shadows and rounded corners together

If you’re baking corners in because the target environment doesn’t support CSS, odds are it doesn’t support box-shadow either. In those cases, bake the shadow into the image too — export at a larger canvas, draw the rounded rectangle, add a soft shadow underneath, and save the whole composite as a transparent PNG.

This approach also solves the dreaded “shadow clipped by the rounded mask” problem that appears when CSS overflow: hidden on a rounded container crops the shadow of a child element.

Batch rounding

For product catalogs, team photo galleries, or icon sets, batch tools round hundreds of files with the same radius in one pass. Useful options to look for: maintain aspect ratio, choose output format per file, add a transparent padding around the rounded shape to prevent cropping when the image is pasted.

Safe padding for drop-in placement

When you export a rounded-corner image that will be pasted into another composition, add a few pixels of transparent padding around the shape. This prevents the edge of the rounding from touching the container border awkwardly and gives you wiggle room for alignment.

Source image: 500 x 500
Target rounded output: 500 x 500
Safer output: 520 x 520 with 10 px transparent padding

The padded version still reads as 500 px but gives downstream editors a clean drop-in asset.

Accessibility implications

Heavy rounding on buttons and interactive elements can hurt perceived tappability for some users — the shape starts to resemble decorative elements rather than controls. Design conventions suggest 4–8 px radius for interactive elements so they still read as “tappable thing,” even if the rest of your design uses 16+ px.

For users with cognitive or motor accessibility needs, consistent shape language across buttons matters: a button with 16 px radius, a card with 16 px radius, and a pill-shaped tag can all live together, but buttons shouldn’t vary randomly between radii in the same interface.

Email clients and rounded corners

Outlook, in particular, is famously inconsistent with CSS border-radius. For email signatures and marketing emails, bake the corners into the image file and ship PNG. Inline <img> tags with baked-in PNG corners survive every email client; CSS rules survive some and get ignored by others.

The same applies to many older PDF generators, Word-to-PDF converters, and some enterprise document systems. When the render environment is unpredictable, bake.

Mask versus crop

Rounding corners via a mask keeps the whole image intact and just hides the corner regions. Cropping to a circle (or rounded shape) actually removes pixels. For most purposes they’re equivalent, but masks let you undo or change the mask later without losing the source; crops are permanent.

In CSS, border-radius is effectively a mask. In image editors, look for “add layer mask” or “non-destructive round” options if you want to preserve the original underneath.

Rounding ratio across sizes

If your design system uses the same radius across icon sizes 16–512 px, the smallest icons end up barely rounded (a 2 px curve on a 16 px icon is nearly square) and the largest look harsh. A proportional scale works better:

16 px icon  -> 3 px radius
24 px icon  -> 4 px radius
32 px icon  -> 6 px radius
64 px icon  -> 10 px radius
128 px icon -> 20 px radius
512 px app icon -> 100 px radius (roughly iOS squircle ratio)

Roughly 15–20% of the side length produces a consistent “friendly rounded” feel across all sizes.

Common mistakes

Saving rounded corners as JPEG and ending up with an ugly white corner fill on every asset — a confusion that costs designers a day when they discover all 400 exports have to be redone as PNG. Another frequent mistake: using a percentage radius on a rectangular rather than square canvas and getting a pill shape when you expected a rounded rectangle — remember that 50% of a 800 × 400 rectangle is 400 px, which produces rounded half-circles at each short end. If you want a circle, the source must be square; if you want a rounded rectangle, use pixel values or a smaller percentage. Finally, baking corners into images you could have styled with CSS locks you out of easy redesigns — prefer CSS whenever the render environment supports it.

Run the numbers

Our image round corners tool bakes rounded corners into any image with per-corner radius control and transparent PNG/WebP output. For the CSS-first version when you have control of the markup, the border-radius generator produces the exact rule. And for the specific case of circular avatars, the profile pic circle cropper handles the square-first crop and the 50% round in one step.