How to Add Rounded Corners to Images Online

The Gap Between CSS and Actual Image Files

If you build websites, you already know border-radius. Set it in CSS, the browser clips the element, and the corners look round. But the underlying image file is still a rectangle. Right-click and save it — sharp corners. Paste it into PowerPoint — sharp corners. Drop it into an email template — sharp corners. Print it — you get the idea.

The Rounded Corners tool solves this by redrawing the image onto a canvas with a clipped path, then exporting a PNG where the corner pixels are actually transparent. The rounded version is the file — not a display trick on top of it. This matters for any context where CSS doesn't exist: documents, presentations, social media uploads, thumbnails, email newsletters, and print materials.

How to Round Corners — Step by Step

Step 1 — Upload. Drop any image into the Rounded Corners tool. It accepts JPEG, PNG, WebP, AVIF, BMP, and TIFF. The image stays in your browser — nothing is sent to a server.

Step 2 — Set the radius. Drag the radius slider. The preview updates live. A radius of 16–32px gives a subtle softness. Going higher — 80px, 120px — produces the rounded-card look you see in modern UI design. The maximum radius is half the shortest dimension, so a 400×600 image caps at 200px.

Step 3 — Adjust extras. Pick transparent or solid background. Add a border (0–20px stroke that follows the rounded path) and padding (breathing room between the image edge and the clip boundary). These are optional — most use cases only need the radius.

Step 4 — Download. Click Download PNG. The output is a lossless PNG with full alpha transparency. No watermark, no quality loss, no account required.

If you need to crop or resize the image first, handle that before rounding. Our cropping guide walks through aspect ratios and composition, and the Image Resizer handles exact pixel dimensions.

Per-Corner Radius — More Than Just Rounding

The uniform slider applies the same radius to all four corners. That covers 90% of use cases. But toggle "Per corner" and four individual sliders appear — top-left, top-right, bottom-left, bottom-right — and things get more interesting.

Pill shapes. Max radius on top-left and bottom-left, zero on the right side. Or max everywhere to produce a stadium/capsule shape for button mockups and UI elements.

Tab-style cards. Round the top two corners, keep the bottom sharp. This is how browser tabs, card headers, and notification banners are shaped. Useful when you're mocking up UI screenshots for a portfolio or client presentation.

Ticket stubs. Round just one corner — bottom-right, for instance — for a torn-off or asymmetric effect. Works well for event graphics and promotional material.

The per-corner approach also helps when an image will be placed against other elements. A product photo in a grid might only need rounding on the outer corners if the inner edges meet adjacent cards. Getting this right in the image file saves fighting with CSS overrides or presentation software clip masks.

Transparent PNG vs Solid Background

By default, the tool outputs transparent corners. The checkerboard pattern in the preview shows which pixels are transparent. This is what you want for most design work — the image composites cleanly over any background in Figma, Canva, Google Slides, or HTML.

But not every platform handles transparency. Some email clients (older desktop Outlook, specifically) render transparent pixels as black or white. JPEG doesn't support alpha at all — if someone converts your PNG to JPEG, the transparent corners become white rectangles. And some social media platforms strip alpha channels on upload.

When transparency won't work, switch the background to "Color" and pick a solid fill that matches your target surface. White for a document, dark gray for a dark-mode email, your brand color for a promotional banner. The corners are still rounded — they're just filled instead of transparent. For more on image format behavior, the format conversion guide covers the tradeoffs between PNG, JPEG, and WebP.

Borders and Padding

A border draws a crisp stroke along the rounded path. This isn't a rectangular outline — it follows the exact curvature of each corner. At 1–2px in a subtle gray, it adds definition when placing an image on a similarly-colored background. At 4–6px in a bold color, it becomes a design element — frame a profile photo, highlight a product shot, or match a brand palette.

Padding adds space between the image content and the rounded boundary. Without padding, the rounded clip cuts directly into the image pixels. With 10–20px of padding, there's breathing room — the image floats inside the rounded shape. This is especially useful for screenshots and UI mockups where you don't want the clip to eat into content near the edges.

Combine border + padding + a solid background color, and you get a framed, matted look — similar to what you'd achieve with a physical photo mat. One pass through the tool replaces three layers in a design editor. If you want to add text or arrows on top of the result, the Image Annotator handles overlays.

Where Rounding Fits in the Editing Workflow

Order matters. Rounding should be one of the last steps, not the first. Here's why: if you round corners and then resize the image, the resampling algorithm softens the anti-aliased corner edges, producing blurry or jagged curves. If you crop after rounding, you might cut off a rounded corner entirely.

A reliable sequence: crop to the right aspect ratio, resize to the final dimensions, then round the corners. After rounding, compress the PNG if file size matters — the Image Compressor handles PNG optimization without destroying the alpha channel. If the image is destined for social media, the Social Resizer exports platform-specific dimensions so you can round corners after sizing.

For batch workflows — say, rounding 30 product photos with identical settings — the approach is sequential: process each image individually with the same radius. Check our compression guide for tips on keeping PNG file sizes reasonable after rounding, since transparent PNGs tend to be larger than equivalent JPEGs.

Real-World Use Cases

App screenshots for the App Store. Apple and Google's listing pages show screenshots at native resolution. If your mockup has rounded device frames, the screenshot itself should match — sharp corners inside a rounded phone bezel look off.

Email newsletters. HTML email rendering is still inconsistent. Baking rounded corners into the image means every client — Gmail, Yahoo, Outlook, Apple Mail — shows the same result. No CSS border-radius support needed.

Presentation slides. PowerPoint and Google Slides have built-in shape-crop tools, but they're fiddly and inconsistent across versions. A pre-rounded PNG drops in and just works. For print-quality slides, verify your image resolution is high enough with the Quality Analyzer before rounding.

Social media cards. Platforms like Twitter/X, LinkedIn, and Facebook crop and resize images unpredictably. Pre-rounded corners with a matching background color survive the platform's processing better than relying on transparent alpha. The social media image sizes guide has the current dimension specs for each platform.

Common Questions

Does rounding corners change the file format? Yes — the output is always PNG, because only PNG supports the alpha transparency that makes corners truly transparent. If you upload a JPEG, the result downloads as PNG. Quality stays identical; no recompression happens. Need a different format afterward? Run the PNG through the Format Converter.

Can I make a perfectly circular image? Yes. Start with a square image — use the Image Cropper to crop to 1:1 if needed. Then set the radius to half the width. A 400×400 image with a 200px radius produces a perfect circle with transparent corners.

Will transparent corners display correctly in email clients? Most modern clients handle PNG transparency fine — Gmail, Apple Mail, Outlook on the web. Older desktop Outlook (2016 and earlier) sometimes replaces transparency with white or black. If you're targeting those clients, switch background from Transparent to a solid color that matches your email body. The corners still look rounded; there's just no alpha channel to misrender.

Sharp Images, Soft Edges

Rounded corners are a small detail that affects how an image feels in context. A sharp rectangle says "raw file." A rounded image says "designed, intentional, ready to use." The Rounded Corners tool turns the first into the second in about ten seconds — upload, drag a slider, download. No installs, no Photoshop, no sign-up forms standing between you and a finished image.