How to Round the Corners of an Image Free [2026]

The problem: most rounded-corners tools upload your image

You need a product photo with rounded corners for an app mockup. Or a team photo with a subtle corner radius for a presentation slide. Or a batch of UI screenshots with consistent 16px corner rounding for a design deliverable. You search for “round image corners online free” and land on one of the popular tools.

You drag the image in. A progress bar appears. The file uploads to their server, gets processed remotely, and you receive the rounded image back. Applying a rounded rectangle clip path to an image is a three-line Canvas operation. There is no reason it needs a server.

Sending product shots and UI screenshots to unknown services is a minor risk. Sending mockups of unreleased products, confidential interface designs, or client work under NDA to an ad-supported web tool is a bigger one. Every upload to an unknown service is a risk you are accepting without a clear need.

I built SammaPix Round Image to apply rounded corners to images entirely inside your browser. No server is involved at any point. The tool uses the HTML Canvas API — a built-in browser technology that has been standard in every modern browser for over a decade. Corner rounding is a drawing operation, and modern browsers handle it locally and instantly.

What “no upload” actually means

When you drop an image into SammaPix Round Image, your browser reads the file using the FileReader API — a standard browser API for reading local files without network access. The image is decoded into pixel data, passed to an HTML Canvas element, clipped with a rounded rectangle path, and exported as a blob: URL downloaded directly from browser memory. Zero network requests carry your image to any remote server.

How browser-based corner rounding actually works

Understanding the mechanism helps you predict the output and choose the right settings. Here is what happens under the hood when you click Apply with rounded corners mode selected:

1. FileReader reads the image from your device. The file is loaded into browser memory as an ArrayBuffer. No network request is made. The read is entirely local.
2. The browser decodes the image into a bitmap. The compressed image file (JPEG, PNG, WebP, etc.) is decoded into a raw pixel array — an ImageBitmap object in browser memory.
3. A Canvas element is created at the same dimensions as the input image. Unlike circle crop, which may change the canvas size, rounded corners preserve the original image dimensions. A 1200x900 image produces a 1200x900 canvas.
4. A rounded rectangle clipping path is applied. The canvas 2D context calls ctx.roundRect() (or equivalent arcTo calls for older browser compatibility) with the chosen corner radius, then ctx.clip() to restrict all subsequent drawing to inside that rounded rectangle.
5. The image is drawn onto the canvas. The full image is drawn at position (0, 0). Only the pixels within the rounded rectangle clip path are rendered — the four corner areas remain transparent alpha.
6. The result is exported as a transparent PNG and offered for download. The canvas is converted to a PNG Blob — the only format that correctly preserves the transparent corner pixels. The Blob is served via a temporary blob: URL and downloaded directly. Nothing leaves your device.

The roundRect() method is supported in all modern browsers as of 2023. For older browsers, the equivalent four-arc construction using arcTo() achieves the same result. The Canvas API is a browser standard since HTML5 and has been available in Chrome, Safari, Firefox, and Edge for over a decade.

Why the output must be a transparent PNG

A rounded rectangle removes the four corner areas of the image. Those corners need to be transparent — meaning they have no color and show through to whatever is behind the image. If the corners are transparent, the image looks correctly rounded on any background: white, dark, colored, or textured.

JPEG does not support transparency. A JPEG export fills all transparent pixels with a solid color — usually white. The result is that the corners of your “rounded” image are actually filled with white rectangles. On a white web page background this is invisible. On any other background — a dark mode UI, a colored slide, a design with a gradient — the white corners create an ugly white box in each corner.

PNG supports an alpha channel. Each pixel has a fourth value (0 to 255) that controls opacity. Corner pixels have alpha=0 (fully transparent). The image content pixels inside the rounded rectangle have alpha=255 (fully opaque). When placed on any background, the corners show whatever is behind, and the image content is fully visible. This is the correct behavior.

How to choose the right corner radius for your use case

The corner radius is the most impactful design decision when rounding corners. It determines how pronounced the rounding looks and how it reads visually at different sizes. Here are reference values for common use cases:

Proportional radius rule

The visual weight of a corner radius depends heavily on the image size. A 20px radius on a 100x100 thumbnail looks like a very round shape — the corners are 20% of the dimension. The same 20px radius on a 1200x900 photo looks barely rounded — the corners are less than 2% of the width. A good rule of thumb is to keep the radius between 1% and 3% of the shorter image dimension for a typical card look. For a 1200x900 image, that is 9 to 27px.

Many design systems define a fixed set of radius tokens: 4px (xs), 8px (sm), 12px (md), 16px (lg), 24px (xl), 9999px (full/pill). If you are matching an existing design system, use the token values from that system for visual consistency.

CSS border-radius vs pre-processed PNG: which one to use

This is the most practical decision for anyone adding rounded corners to images for the web. Both approaches produce rounded corners that look identical. The difference is in how and where the rounding is applied.

CSS border-radius: use for web pages you control

In HTML/CSS, you can round the corners of any image element with a single line:

img.rounded { border-radius: 16px; }

This is the correct approach for web pages because it keeps the original file untouched, the rounding is responsive (you can change the radius without regenerating the file), and it adds zero overhead to the file. The underlying JPEG or WebP file stays compressed and small. The browser applies the rounding at render time, which costs essentially nothing.

Pre-processed transparent PNG: use everywhere else

CSS border-radius only works in web browsers. For any environment where you cannot control the CSS, you need to bake the rounded corners into the image file itself as a transparent PNG. The specific situations where pre-processed PNG is the right choice include:

• Email clients. Gmail, Outlook, and Apple Mail have limited and inconsistent CSS support. Border-radius is supported in some clients and ignored in others. A pre-processed PNG is the only reliable way to show rounded corners in an email campaign.
• Microsoft Office (Word, PowerPoint, Excel). Office applications do not render CSS. When you insert an image into a Word document or PowerPoint slide, you cannot use border-radius. A transparent PNG with baked-in rounded corners is the only way to achieve the effect.
• PDF documents. Embedded images in PDFs are static. There is no CSS rendering layer. A transparent PNG with rounded corners embedded in a PDF will display with correct rounded corners in any PDF viewer.
• Figma, Canva, and design tools. When compositing images in a design tool, using a pre-processed transparent PNG means the rounded corners are part of the asset and will be consistent across any context the asset is used in, without relying on per-instance settings.
• Social media platforms. When posting an image as a photo to Instagram, Twitter, or LinkedIn, you cannot apply CSS. A pre-processed rounded PNG will display with rounded corners in any post where the platform displays it without cropping or reformatting.

How to batch add rounded corners to multiple images

Adding rounded corners to one image is simple. The value of batch processing appears when you have a set of product photos for an e-commerce catalog, a collection of app screenshots for a store listing, a team photo grid, or a batch of images for a design system component library. You need every image to have the same radius value, and doing them one by one is repetitive and slow.

SammaPix Round Image supports batch processing natively. Drop up to 20 images at once onto the dropzone. All files are loaded into browser memory simultaneously. Set your corner radius once, and that value is applied identically to every image in the batch. The Canvas pipeline processes each file sequentially in milliseconds.

When all images are processed, you can download each transparent PNG individually or click Download All as ZIP to get the full batch in a single archive — assembled in-browser with no server involved.

How to round image corners free, step by step

The full process takes under a minute for a batch of 20 images:

1. Go to sammapix.com/tools/round-image in Chrome, Safari, Firefox, or Edge. No account required.
2. Drop your images onto the dropzone or click to browse. You can select multiple files at once. Accepted formats include JPEG, PNG, WebP, GIF, and AVIF. Files are loaded into browser memory immediately.
3. Select rounded corners mode. Choose the rounded corners option (as opposed to circle mode).
4. Set your corner radius. Type a pixel value or use the slider. For a typical card look, 16px is a good starting point. For a preview of how the radius looks, the live preview updates as you adjust the value.
5. Click Apply. Each image is processed through the Canvas pipeline in sequence. A preview of each rounded-corner PNG appears below, with the transparent corners shown as a checkerboard pattern — the standard visual indicator for transparency.
6. Download individually or as ZIP. Click the download icon next to any image, or click Download All as ZIP to get everything in one archive. No network request occurs. Files are served from browser memory.

Rounded corner use cases: UI design, email, slides, and more

The practical scenarios where you need a pre-processed rounded corner PNG rather than CSS are more numerous than most people expect:

App store screenshots

Apple App Store and Google Play feature screenshots are often displayed with rounded corners in the store listing. Developers and designers typically prepare screenshots with pre-baked rounded corners matching the device frame (typically 20 to 40px for full-size screenshots) so the screenshots look polished in the listing. SammaPix Round Image lets you batch-process all screenshots to a consistent radius in one session.

Email marketing

Email is the environment where CSS border-radius is least reliable. Major email clients — Outlook on Windows (which uses Word's rendering engine), Gmail in some mobile contexts — either do not support border-radius or render it inconsistently. Pre-processing your marketing images with rounded corners as transparent PNGs, then placing them on a background color in your email template, is the most reliable way to achieve a consistent rounded-corner look across all clients.

PowerPoint and Google Slides

Both PowerPoint and Google Slides have a built-in “Picture Effects” rounding feature, but it produces inconsistent results and is not easily applied in batch. Inserting a pre-processed transparent PNG with baked-in rounded corners gives you pixel-perfect control over the corner radius and ensures the image looks the same regardless of which version of the tool opens the presentation.

Product images for e-commerce

Many e-commerce platforms (Shopify, WooCommerce, Etsy) display product images with square or near-square dimensions. Adding a subtle 8 to 12px corner radius to product photos before uploading creates a softer, more premium look — especially for white-background product shots. The transparent corners blend seamlessly with the white page background.

Does rounding corners affect image quality?

No. Corner rounding via Canvas clipping is a geometric masking operation. The pixels inside the rounded rectangle are identical to the source image pixels at those coordinates — no quality loss of any kind is applied to the visible image content.

The only pixels that change are the four corner areas — and they change from “original image pixels” to “transparent”. The pixel values within the visible rounded rectangle are identical to the source image. This is a pure masking operation, not a re-encoding or re-compression.

The output format is always a lossless PNG. Unlike JPEG, PNG does not compress image data with perceptual loss. The visible pixel values in the output are bit-for-bit identical to those in the source image at the same coordinates. One note: the corners of the rounded rectangle shape — the curved boundary pixels — are anti-aliased by the Canvas API, which means they have sub-pixel alpha values (partial transparency) at the edges. This is correct and intentional behavior that produces smooth-looking curved edges rather than jagged stair-steps. It is the same behavior as the CSS border-radius property in browsers.

Browser-based vs upload-based rounded corners tools: honest comparison

Here is an objective comparison across the dimensions that matter when choosing a tool for rounding image corners online:

How to verify no upload happens

You do not need to take my word for it. Here is how to verify this yourself in under two minutes:

1. Open DevTools. Press F12 (Windows/Linux) or Command Option I (Mac) in your browser. On Safari enable the Develop menu first in Settings › Advanced.
2. Go to the Network tab. Click the Network panel in DevTools. Clear any existing requests.
3. Drop your images and click Apply. Watch the Network panel as the tool processes each file.
4. Observe: no outgoing requests. You will see no network activity during corner rounding or download. The only requests visible are the initial page load assets (JavaScript, CSS). Nothing carries your image to any server.

The image is read by the FileReader API, processed entirely in memory via the Canvas API, and the rounded PNG is downloaded via a blob: URL — no network call is made at any stage of the process.

Other image tools that run in your browser

SammaPix offers a full suite of browser-based image tools, all with no upload and no server processing. Here is when to use each alongside Round Image:

• Round Image: add rounded corners (any radius) or crop to a perfect circle. This is the tool this article is about. Also see the guide how to crop an image into a circle online.
• Add Border: add a colored border around any image — white for Instagram, black for print, or any custom HEX color. Combine with Round Image: first round the corners, then add a border in Add Border tool using inset mode for a subtle frame effect around the rounded image.
• Crop to Ratio: crop images to exact aspect ratios before rounding. If your source images are different sizes, crop them all to the same ratio first for visual consistency in the rounded set. See how to crop photos to perfect ratios.
• Remove Background: AI-powered background removal. Remove a busy background before applying rounded corners so only the subject appears inside the rounded shape — with a completely transparent background behind both the subject and the corner areas.
• Rotate Image: correct the orientation of any image before rounding corners. Rotates 90/180/270 degrees or any custom angle, entirely in-browser.