How is this different from the round PNG creator?

The round PNG creator clips an image to a full circle/ellipse. This tool instead rounds only the four corners of the rectangle by a chosen radius, like a CSS `border-radius`, leaving the straight edges intact.

What does the radius percentage control?

Radius (0-50) is relative to the image's smaller dimension. At 50%, the corners round enough that a square image becomes a full circle; smaller values round just the corners.

Does this add a background color?

No. The corners become fully transparent, not filled with a color, so the result is a PNG with rounded, see-through corners you can place over any background.

Will this work on a non-square image?

Yes. The radius is computed from the smaller of the width and height, so rectangles get proportionally rounded corners rather than an oval shape.

PNG Corner Rounder - Round the Corners of an Image Online

Overview

Introduction

This tool rounds a PNG's corners the same way CSS `border-radius` does, entirely in your browser.

It works on a plain pixel buffer, so nothing you upload is sent to a server.

What Is PNG Corner Rounder?

A corner-rounding tool that builds a rounded-rectangle alpha mask: pixels inside each corner's rounding radius are kept, pixels outside that radius (in the four corner squares) become fully transparent.

Straight edges and the image's center are never affected, only the four corner regions.

How PNG Corner Rounder Works

The radius percentage is converted into a pixel radius based on the image's smaller dimension, then for each of the four corner squares (sized radius x radius), the distance from that corner's inner circle center is checked.

Pixels beyond the radius from their corner's circle center have their alpha set to 0; everything else, including the entire non-corner area, passes through unchanged.

When To Use PNG Corner Rounder

Use it to give a screenshot, avatar, or card-style graphic soft rounded corners before placing it in a design, matching a common UI pattern.

It's especially useful when you need the rounding baked into the actual PNG file rather than applied via CSS at display time.

Often used alongside PNG Border Adder, PNG Opacifier and PNG Area Eraser.

Features

Advantages

Runs entirely client-side; nothing you upload leaves your device.
Radius scales proportionally to the image size via a percentage rather than requiring pixel math.
Produces genuinely transparent corners, not just a solid-color mask.

Limitations

Only the four corners are rounded; this isn't a general shape-clipping tool for arbitrary rounded shapes.
At radius 50% on a square image, the result becomes a full circle, which may be more rounding than intended for some use cases.

Examples

Round a screenshot's corners

Input

A 400x300 PNG screenshot, radius 8%

Output

The same 400x300 PNG with gently rounded corners

A modest radius rounds just the sharp corners while keeping most edges straight.

Turn a square into a circle

Input

A 200x200 PNG avatar, radius 50%

Output

A 200x200 PNG clipped to a full circle

At the maximum 50% radius on a square image, all four corners meet in the middle of each edge, producing a circle.

Best Practices & Notes

Best Practices

Use a small radius (4-12%) for a subtle 'rounded card' look, and higher values only when you want a strongly rounded or circular result.
Preview against a dark background if your downstream use case needs to confirm the corners are truly transparent.

Developer Notes

The lib function computes each corner's inner circle center from the radius and image dimensions, then tests each corner-square pixel's squared distance against the squared radius, zeroing alpha for pixels outside it — a standard rounded-rectangle mask, distinct from the full-ellipse clip the round PNG creator uses.

PNG Corner Rounder Use Cases

Rounding a screenshot before embedding it in a UI mockup
Softening an avatar or profile image's corners
Matching a design system's card border-radius in an exported asset

Common Mistakes

Using a 50% radius on a rectangular (non-square) image and expecting a perfect circle — it produces a rounded pill/stadium shape instead.
Forgetting the corners become transparent rather than filled with a background color.

Tips

Start with a radius around 8-10% for a typical 'rounded card' look matching common UI design.
Combine with the border adder tool afterward if you want a colored border following the same rounded shape.

PNG Corner Rounder