How to Round the Corners of an Image Online

You’ve got a product photo, a profile picture, or an app icon with hard rectangular corners, and it needs to sit inside a rounded card on a website or match a design system that uses soft edges everywhere. CSS border-radius handles this fine when the image is a background inside a styled container — but the moment you need to export the image itself as a standalone rounded PNG (for a favicon, an email template, a slide deck, a print asset), CSS can’t help you anymore.

That’s a different problem than it sounds like. Opening a full editor like Photoshop or GIMP for a corner radius is overkill for a five-second task, and a lot of quick “round my image” tools either bake in a fixed radius you can’t adjust or flatten the transparency into an ugly white background instead of a clean, exportable PNG.

What rounding an image’s corners actually involves

Rounding corners on an image means masking out the four corner regions based on a radius you choose, and replacing what was there — either with transparency (so the image blends into whatever background it sits on) or a solid fill color (so it looks intentional against a fixed-color surface like an email client that strips transparency). The output needs to be a real image file, not a CSS trick, if you’re going to use it somewhere CSS doesn’t apply — a downloadable PDF, a native app asset, a social media upload.

Why people get stuck here

• CSS-only solutions don’t travel. border-radius on an <img> works great in a browser, but breaks the moment the image needs to exist as a standalone file — an email attachment, a printed asset, an app icon.
• Fixed radius presets. Some tools only offer “small / medium / large” instead of letting you dial in an exact pixel radius that matches your design system.
• Transparency gets lost. A lot of quick converters flatten the corners to white instead of true transparency, which looks fine on a white page and wrong everywhere else.
• Format confusion. Rounded corners require transparency support, so the output has to be PNG (or another format that supports an alpha channel) — exporting as JPEG silently loses the effect.

What a good rounded-corners tool looks like

An adjustable, precise radius

You should be able to set the exact corner radius rather than pick from a small set of presets, so the result matches whatever design spec you’re working against.

A real background choice

Either transparent output for placing over any background, or a specific fill color for contexts (like some email clients) that don’t render transparency reliably.

True PNG export, not a CSS workaround

The point of the exercise is a standalone file you can drop anywhere — attach to an email, upload to an app store, print — so the output needs to be an actual rounded-corner image, not a snippet of CSS that only works in a browser.

Common mistakes to avoid

• Exporting a rounded image as JPEG, which has no alpha channel and will show a solid box where the transparency should be.
• Using CSS border-radius for an asset that needs to exist outside a browser context, like an app icon or a printed flyer.
• Picking a radius that’s too aggressive for a small image, which can visibly eat into the subject rather than just softening the edge.
• Forgetting to check the result against the actual background it’ll sit on — a transparent PNG that looks fine on a white mockup can look wrong against a dark theme.
• Re-rounding an already-rounded image repeatedly through different tools, which can compound artifacts at the corners.

How to do it with Rounded Corners Tool

Online Tool Store’s Rounded Corners Tool processes your image locally in the browser — nothing is uploaded to a server.

1. Open the Rounded Corners Tool and upload your image.
2. Adjust the corner radius until it matches what you need.
3. Choose transparent background or a specific fill color, depending on where the image will be used.
4. Download the result as a PNG file.

Because it runs in your browser, it also works fine for images you’d rather not upload anywhere — the file never leaves your device.

Frequently asked questions

Why does my rounded image show a white box instead of transparency?

That happens when the file was exported as JPEG instead of PNG. JPEG has no alpha channel, so anywhere the corners should be transparent gets filled with a solid color instead. Re-export as PNG to preserve the rounded, transparent corners.

Can I use CSS instead of rounding the actual image file?

Yes, if the image only ever appears inside a web page — border-radius on an <img> or its container works well there. You need an actual rounded image file when the asset has to exist outside CSS: an email, a printed piece, an app icon, or any context that doesn’t render your site’s stylesheet.

What radius should I use for a profile picture?

There’s no fixed rule, but a radius large enough to noticeably soften the corners without cutting into the subject usually looks best — test it against the actual background the picture will sit on, since a soft radius reads differently on light versus dark surfaces.

Final thought

Rounding an image’s corners is a small visual detail, but it’s the kind of thing that makes an asset look intentional instead of just placed. Keep it as a real PNG with true transparency if it needs to travel outside a browser — CSS is fine, right up until it isn’t.

Try the free Rounded Corners Tool