Adding rounded corners to a photo means clipping the four corners of a rectangular image so they curve into a rounded-rectangle shape while the original width and height stay the same. The pixels outside the curve are replaced with transparency rather than painted with a background color, which is why the file has to be exported as a PNG. A browser-based tool such as Round Image Corners lets you load a local JPG, PNG, or WebP, pick a radius from 1% to 50% of the image's shorter side, preview the result at the same size, and download a full-resolution PNG without uploading the photo to a server. Because the radius is calculated from the shorter edge, the same percentage produces visually consistent corners on landscape, portrait, and square sources. For a quick reference, a 400 by 200 pixel image at 25% radius produces a 50 pixel corner curve, because the shorter side (200) multiplied by 0.25 equals 50. The page also displays the exact output dimensions and the rounded whole-pixel radius that was applied, which makes it easy to verify that the file was not silently resized during the operation.
What Rounding Corners Does to a Photo
When you round the corners of a photo, the canvas dimensions do not change. A 1200 by 800 image stays 1200 by 800 pixels, and a 600 by 900 portrait stays 600 by 900. What changes is the alpha channel of the output: pixels that fall outside the rounded-rectangle clipping path are made transparent, while everything inside the curve keeps its original color and detail.
This matters for three practical reasons:
- Composition. When the rounded image is dropped onto a colored page, presentation slide, app card, or social-media template, the background shows through the transparent corners instead of fighting a hard white or black square.
- Predictability. Designers can rely on the same corner radius across an icon set, a product gallery, or a feature grid without measuring each asset by hand.
- No quality loss. Because the image is only clipped and re-encoded as PNG, no resizing, sharpening, or lossy compression is applied to the visible pixels.
The clipping itself is performed with the browser's native canvas API. The CanvasRenderingContext2D.roundRect() method defines the rounded rectangle, and a clip operation restricts drawing to that shape before the decoded source is drawn once at its natural dimensions. The result is a clean rounded-rectangle mask with no halo, no white fill behind the corners, and no decorative border.
How to Add Rounded Corners to a Photo
Open Round Image Corners in your browser, then work through these steps:
- Choose a local file. Select a JPG, PNG, or WebP from your computer. The file picker only accepts those three formats, and the file must be 25 MiB or smaller. Decoded images also need to stay within a shared safety budget of 20,000 pixels per side and 40 megapixels total, so very large prints are rejected with a visible error rather than a silent failure.
- Set the radius. The slider runs from 1% to 50% and is always interpreted as a percentage of the shorter image side, not the longer one. A low percentage keeps most of the rectangle visible and only softens the very tip of each corner; a high percentage curves the corners deeply toward the center.
- Select Round corners. The tool clears a canvas to transparency, builds a rounded-rectangle clipping path, draws your image once at its original size, and encodes the result as a PNG.
- Inspect the preview. The preview shows the rounded PNG at a display-friendly scale, but the underlying canvas keeps the source's full resolution, so what you see is what the downloaded file will contain.
- Download the result. The file is saved with a name ending in -rounded-corners.png so the format change and the transformation are immediately obvious in your Downloads folder. You can repeat the export at another radius without re-selecting the source image.
Picking a Radius From 1% to 50%
The radius slider is expressed as a percentage because the actual pixel value depends on the image. The tool always rounds the computed value to a whole pixel so the corner curve is crisp on the output, and it always uses the shorter side as the reference dimension, which keeps the radius visually consistent whether your photo is wide, tall, or square.
The table below summarizes how each range of the slider typically reads on a finished image. Use it as a starting point and then fine-tune by eye.
| Radius range | Visual effect | Typical use |
|---|---|---|
| 1%–5% | Almost-square with very slight corner softening | Documents, screenshots, and assets that need a sharp outline |
| 10%–20% | Noticeable rounding, modern but conservative | Web cards, blog thumbnails, e-commerce listings |
| 25%–35% | The look most associated with current mobile UI | App icons, feature tiles, product hero images |
| 40%–50% | Heavily rounded, approaching a pill or stadium shape | Banner backgrounds, call-to-action panels |
A concrete reference: a 400 by 200 pixel image at the 25% setting produces a 50 pixel radius, because the shorter side (200) multiplied by 0.25 equals 50. Because the rule is always based on the shorter edge, the same percentage gives the same visual result on wide, tall, and square sources — you only need to adjust the percentage, never the absolute pixel value, when switching between formats.
Why the Output Is Always a PNG
The download is always a PNG even when the source is a JPG. The reason is format-level: PNG supports a full alpha channel so each corner pixel can carry its own transparency value, while JPG cannot. If the corners were stored in a JPG, they would have to be filled with a solid color, which would defeat the purpose of rounding.
A few related consequences worth noting:
- File name. The output uses the original name with -rounded-corners.png appended, so it is obvious at a glance that the format has changed and the corners have been rounded.
- File size. Because a JPG source is decoded and re-encoded as PNG, the output file can be larger than the input. PNG is a lossless format while JPG relies on lossy compression, so the same pixel data often takes more bytes in PNG.
- Transparency behavior. Transparent pixels that already exist in a PNG or WebP source remain transparent only where they fall inside the rounded rectangle. Inside the rounded rectangle, all visible source pixels are preserved exactly.
- Metadata. The browser canvas export builds a fresh PNG from decoded pixels, so EXIF metadata such as camera model, capture time, and GPS location is not carried over. If you need a fuller walkthrough of which fields survive a canvas re-encode, the EXIF removal guide explains the same local-processing pattern step by step.
Browser-Based Tool vs Desktop Editor
A browser-based clipping tool and a full desktop image editor can both round corners, but they are tuned for very different jobs. The comparison below highlights where each approach fits best.
| Capability | Round Image Corners (browser) | Desktop editor (Photoshop, Affinity, GIMP) |
|---|---|---|
| Single equal radius for all four corners | Yes | Yes |
| Separate radius per corner | No | Yes, with layer masks or shape tools |
| Reversible layered source file | No, output is re-encoded PNG | Yes, when saved as PSD or similar |
| Batch processing many images | No, one image per session | Yes |
| EXIF metadata preserved | No | Depends on save options |
| Internet required after page load | No, file never leaves the browser | No |
For a single photo where every corner should curve the same way, the browser path is faster because there is nothing to install, nothing to log in to, and nothing to upload. When you need separate corner radii, masks, decorative frames, drop shadows, or a reversible layered source, a desktop editor is the right tool. A quick way to confirm whether the file is leaving your computer at all is to disconnect from the internet after loading the page and try a download; it works the same way because the decoding, clipping, encoding, and file creation all happen inside the current tab.
Input Limits and Error Handling
The tool is strict on purpose. Files outside the supported set produce visible errors instead of a partial or silently corrupted download. Here is what to watch for.
- Format. Only JPG, PNG, and WebP are accepted. HEIC, BMP, TIFF, GIF, and RAW formats are rejected up front.
- File size. The input file must be 25 MiB or smaller.
- Decoded dimensions. After decoding, the image must stay within 20,000 pixels per side and 40 megapixels total. Large prints and very long panoramic photos can hit this ceiling even when the file size is modest.
- Radius value. The radius must be a whole number from 1 to 50. Anything outside that range is rejected.
- Asynchronous safety. If you change the file or the radius while a previous export is still running, the earlier result is invalidated automatically, so a slow job cannot overwrite a newer choice.
When any of those checks fail, the page surfaces a clear message rather than producing a partial PNG. If you regularly work with files just outside those limits, the usual workaround is to resize the source first with a separate tool and then round the corners, which keeps the clipping step predictable and lets you verify the result line shows your intended dimensions.