Why rounded image corners need a transparent format
Understand alpha channels, why PNG and WebP keep rounded corners clean, and when a baked-in rounded image beats CSS border-radius.
What the alpha channel actually does
A rounded corner is not a shape drawn on the image, it is the absence of image in the four corner areas. To record that emptiness a format needs an alpha channel, an extra value per pixel that stores how opaque or see-through it is. PNG and WebP both carry alpha, so the corners can be stored as fully transparent while the rest of the picture stays solid. JPEG has no alpha at all, which is why saving a rounded image as JPEG fills the corners with white or black instead of letting the background show through.
How the corners are clipped
This tool draws your image onto an HTML canvas and sets a rounded-rectangle clip path before painting. Anything outside that path is never drawn, so those pixels keep the canvas default of fully transparent. The radius you choose is clamped to half the shorter side, which is the point where all four corners meet and the rectangle becomes a pill or circle. Because only the clip changes, every pixel inside the curve is a pixel-perfect copy of the original with no resampling or color shift.
Baked-in corners versus CSS border-radius
On the web you can round a corner with a single line of CSS, border-radius, and for anything shown in a browser that is the lighter choice because the original file stays rectangular. A baked-in rounded PNG earns its place when the rounding must travel with the file: email signatures, PDFs, slide decks, app icons, README badges or chat avatars where you cannot rely on a stylesheet. In those places an exported transparent image looks identical everywhere, with no dependence on how the viewer renders CSS.
Choosing between PNG and WebP
PNG is the safe default. It is lossless, universally supported, and keeps crisp edges on logos, screenshots and flat graphics. WebP also supports transparency and usually produces a noticeably smaller file, which helps on photo-heavy images or when page weight matters. Support for WebP is broad in modern browsers and apps, though a few older tools still prefer PNG. If you are unsure where the image will land, export PNG; if you control the destination and want a lighter file, WebP is a strong pick.