On a web page, rounding an image corner is one line of CSS and you should almost always use it. The reason a tool like this exists is the set of places where CSS never arrives: email clients, PDF exports, slide decks, and anywhere the image travels on its own.
Use CSS Where CSS Works
border-radius: 12px on an <img> element rounds it visually with no change to the file. It stays a JPEG, keeps its compression, and can be restyled or removed later without re-exporting anything.
That flexibility is the whole argument. Rounding baked into a file is permanent: change the design and every asset needs regenerating. It also forces the file to PNG, which for a photograph can mean a file five to ten times larger than the equivalent JPEG.
So the rule is straightforward. If the image will be displayed by a browser on a page you control, round it with CSS. Reach for a permanent change only when that is not true.
Where Baked-In Rounding Is the Only Option
Each of these strips or ignores the styling that would otherwise do the job.
HTML email
Outlook on Windows renders through Microsoft Word's engine, which ignores border-radius entirely. Corners appear square for a large share of recipients, so a rounded avatar in a newsletter has to be rounded in the file.
PDF and print exports
Many PDF generation paths flatten images and drop CSS clipping, particularly older wkhtmltopdf pipelines. Anything destined for print should carry its own shape.
Slide decks and documents
PowerPoint, Keynote and Google Slides can round images themselves, but the setting is lost when the file is exported, converted or opened in a different application.
Social sharing images
Open Graph previews are rendered by each platform with its own styling. If the rounding is part of the design, it must be in the file.
Assets handed to someone else
A logo or avatar sent to a partner, an app store, or a print shop will be placed by people who never see your stylesheet. Ship the shape you want.
Rounded corners require PNG, not JPEG
The area outside the curve has to be transparent, and JPEG has no alpha channel. Saving a rounded image as JPEG fills those corners with solid colour, usually white or black, which looks correct only until the image sits on a different background. Any tool that rounds corners properly outputs PNG or WebP.
Choosing a Radius
Radius should scale with the element. A 12px radius that looks right on a thumbnail disappears on a hero image.
| Element | Typical radius | Effect |
|---|---|---|
| Avatar, fully round | 50% of width | Circle; the convention for profile photos |
| Small thumbnail (under 100px) | 4-8px | Softens the edge without reading as a shape |
| Card or list image (200-400px) | 8-16px | The current default across most interfaces |
| Hero or feature image (800px+) | 16-32px | Noticeable but not decorative |
| App icon | ~22% of width | Approximates Apple's superellipse |
| Squircle | n/a | Continuous curvature; needs an SVG mask, not border-radius |
Round the corners of an image
Per-corner radius, squircle corners and a live preview, exported as PNG, WebP or JPG.
Why App Icons Are Not Actually Rounded Rectangles
Apple's icon shape is not a rounded rectangle. Since iOS 7 it has been a superellipse, often called a squircle, where the curvature changes gradually rather than switching abruptly from straight to circular.
The difference is subtle and the reason it exists is not. A standard border-radius produces a curvature discontinuity at the point where the arc meets the straight edge. The eye registers it as a slight flattening, particularly at large sizes and on high-density displays. A superellipse blends the transition, so the outline reads as one continuous curve.
CSS cannot express this. border-radius is strictly elliptical, so a true squircle needs an SVG path or a mask image. For most interface work the difference is not worth the complexity, but for an app icon or a logo displayed large, it is visible and worth doing properly.
When the shape is baked into the file the constraint disappears, because a canvas can draw any path CSS cannot. The tool above has a Smooth corners option that traces each corner as a superellipse quadrant instead of a circular arc, which is the same curve by a different construction. Tick it, crop to a square, push the radius to maximum, and the outline you get is the app icon shape.
Frequently Asked Questions
Related Tools
Keep Reading
Base64 Is Not Encryption: What It Does and Why It Exists
Three bytes become four characters, which is where the 33 percent size increase and the trailing equals signs come from. And why it hides nothing.
Length Units: The Inch Is Defined in Metres, and Other Surprises
Every imperial unit has been legally metric since 1959. Where the US survey foot differed until 2023, and the conversion error that lost a Mars orbiter.
Percentage Change vs Percentage Points, and Other Costly Confusions
Down 50 percent then up 50 percent leaves you down 25. Why percentages are not symmetric, and how stacked discounts really multiply.
Title and Meta Description Length: Pixels, Not Characters
Google truncates by rendered width, so a title of capitals runs out thirty characters early. Plus why it rewrites most descriptions anyway.