How to Round the Corners of an Image and Keep Them Transparent
Rounded corners are everywhere in modern design — app icons, cards, avatars, thumbnails, slide images. They soften a rectangle and make it feel friendlier and more polished. But there's one detail that trips people up: for rounded corners to work on any background, the corners have to be genuinely transparent.
This short guide explains why the output format matters, how much rounding to apply, how it differs from a circle crop, and how to round corners in your browser without uploading anything.
Round Image Corners
Round the corners of an image and save a transparent PNG.
Why the corners must be transparent
When you round a rectangle, you carve away the four square corners. Something has to fill that space. If you save as JPG — which can't store transparency — those corners get filled with a solid colour (usually white), and you end up with an image that only looks rounded on a white page. Put it on any other colour and the white triangles reappear.
The fix is to save as PNG (or WebP), which supports transparency. The carved corners become truly see-through, so the image sits cleanly on any background. That's why a rounded-corners tool should always hand you a PNG.
How much radius to use
The right radius depends on the job. A small radius (a gentle softening) suits large images like hero banners and cards, where heavy rounding would look cartoonish. A larger radius suits small elements like avatars and app icons, where a pronounced curve looks intentional.
Measuring the radius as a percentage of the shorter side keeps it consistent across different image shapes. Crank it all the way to 50% and a square image becomes a perfect circle.
Rounded corners vs a circle crop
These are two ends of the same slider. A circle crop is just rounded corners taken to the maximum — the corners curve so far they meet in a full circle. If you specifically want a round avatar, the Circle Crop tool does exactly that. For anything in between — a card, a thumbnail, a softened rectangle — rounding the corners a modest amount keeps the rectangular shape while taking the hard edges off.
Rounding corners privately in your browser
PixelResize rounds corners on your device and always exports a transparent PNG, with a checkerboard preview so you can see exactly where the transparency falls. Nothing is uploaded, the image keeps its original dimensions, and you can dial the radius from a subtle curve to a full circle. Add a border afterwards or resize to fit wherever the image is going.
Key takeaways
- Rounded corners need a transparent format — always export as PNG, not JPG.
- JPG fills the carved corners with white, so rounding only 'works' on white backgrounds.
- Use a small radius for large images and a larger radius for small elements.
- Measuring radius as a percentage keeps rounding consistent across shapes.
- A full 50% radius on a square turns rounded corners into a circle crop.