Round Image Corners

Round a photo on a typical free site and you usually hit one of two annoyances. The corners come back filled with white or black instead of see-through, because the site quietly handed you a JPG. Or your full-resolution photo, camera model and GPS coordinates and all, just took a round trip through a company's server so it could do a job your own browser finishes instantly. Neither of those things has to happen for a rounded corner. You drag a slider, the corners curve on a gray-and-white checkerboard that shows the real transparency as it happens, and you download a PNG that keeps those corners genuinely empty. Nothing gets uploaded, no account, no watermark. The picture you pick never leaves your device.

That checkerboard matters more than it looks. It's your proof, before you ever click download, that the corners are truly transparent and not just painted white. That's the difference between an image that drops cleanly onto any background and one that shows an ugly white block the moment it lands on a dark page.

1. Choose an image. Click the box or drag a file in. PNG, JPG, WebP, or GIF, whatever your browser can decode. The tool reads the real pixel size and tells you whether you've got a square (which can become a circle) or a rectangle (which becomes a pill). Files up to 40 MB are fine.
2. Drag the radius slider. Zero is sharp corners. Slide up and they curve more, and the preview redraws as you go, so you set the softness by eye instead of guessing at a number.
3. Or make it a circle. The Make it a circle button jumps the radius to its maximum, half the shorter side. On a square that's a perfect circle. On a rectangle it rounds the two short ends into a stadium (pill).
4. Check the corners against the checker. Wherever the gray-and-white pattern shows through your image, that area will be transparent in the download. If you can see the checker, the corner is truly empty.
5. Download the PNG. It saves at your original resolution, as a PNG, so the transparent corners survive.

Nothing is baked in until you download, so slide the radius back to zero any time and the corners go sharp again.

When you round an image, the four corners get removed, cleared to transparent, empty pixels that let whatever sits behind the image show through. That see-through-ness lives in a separate alpha channel alongside the red, green, and blue, and a file format either carries that channel or it doesn't.

PNG carries that channel, WebP does too, and JPG simply doesn't, it was built for photographs where every pixel is solid, so it has nowhere to record "this pixel is see-through." Save a rounded image as a JPG and the encoder has to put something in those corners, so it fills them with a flat color, usually black or white. Your careful rounding comes back as four ugly triangles. That's why this tool only ever outputs PNG and doesn't bother offering a JPG option. Offering one would just be a trap.

One honest catch. A PNG is lossless, so it's often heavier on disk than the JPG you started with. If the file size matters, run the result through a PNG compressor afterward, a good one shrinks it a lot and leaves the transparent corners untouched.

Most tools and CSS think in absolute pixels, border-radius: 40px. The trouble with a fixed number is that 40 pixels is a huge curve on a 200-pixel thumbnail and almost invisible on a 4,000-pixel banner, so the same number gives two different looks depending on the image size.

So the slider here is a percentage of half the shorter side instead. 25% is the same gentle curve whether you feed it a tiny avatar or a big card, because it scales with the image. And 100% maps to something meaningful, the exact radius where the corners stop being corners and a square turns into a full circle. If you do need the absolute pixel value, say to match a card that's set to border-radius: 24px, type 24 into the px box next to the percent one. It sets the radius directly, so you land on the number instead of hunting for the notch that happens to sit near it.

A rough feel for the dial. 5 to 15% is the quiet softening on most UI cards and buttons. 20 to 30% is the friendly rounded-square you see on app icons. Past 50% it starts eating into the shape, and 100% is the extreme, a circle from a square or a pill from a rectangle. Most real work sits in the 10 to 30 band, and a true circle is the special case you reach for on purpose.

Circular avatars are probably the top reason anyone rounds corners, so it's worth being precise. A circle is just rounding taken to its limit, the radius set to exactly half the shorter side. The one condition is that the image has to be square. On a square, half the width and half the height are the same, so the curve is symmetric and you get a clean round. Feed it a rectangle instead and the short sides curve fully while the long ones stay flat, so what you get back is a pill. The reliable recipe is two steps, crop to a 1:1 square with the face centered, then round that to full here. The image cropper handles the square crop with a locked ratio.

Worth doing even though Slack and most social apps crop your photo to a circle for you, because pre-rounding lets you decide exactly what lands inside the circle. A pre-rounded PNG also shows up correctly in the places that don't auto-crop at all, like an email signature or a slide.