Tooltrusty

Rounded Corner Generator

Baked-in rounded corners for the places CSS cannot reach — email, PDFs, marketplace listings.

Drop an image here or click to choose a file — JPG, PNG or WebP

Runs in your browser. Your image is decoded and redrawn by the Canvas API inside this tab. It is never uploaded, and the original file on your disk is never modified — the tool always produces a new file.

What the rounded Corner Generator does

On a web page you would round an image's corners with one line of CSS and never think about it again. This tool exists for everywhere else: HTML email, where border-radius support is patchy and Outlook ignores it entirely; PDFs and printed material; marketplace and app-store listings that accept an image and apply no styling; and presentation software.

The rounding is done by clipping the image to a rounded rectangle path, so the corners become genuinely transparent. That means the PNG composites onto any background colour without a halo. Turn transparency off and pick a colour when the destination cannot handle an alpha channel — but then the corners are that colour permanently, so it has to match where the image will sit.

Per-corner control covers the cases where symmetry is wrong: a card that sits flush against another element, a speech bubble, or a header image where only the top corners should be round because the bottom meets a caption block.

The border is drawn along the same path and centred on it, so it follows the curve exactly rather than sitting as a square frame outside a round image. The tool also outputs the equivalent CSS, which is worth taking when the image is destined for the web after all — applying the radius in CSS keeps the file smaller and lets you change it later.

One limit worth knowing: the radius is capped at half the shorter side. Beyond that the shape would be a stadium or a circle, and the arcs would overlap; for a full circle use the Circular Crop tool, which is built for it.

How to use it

  1. Load your image and set a radius. Around 8–16px reads as subtle; 24–40px reads as a card.
  2. Tick Set each corner separately if only some corners should be round.
  3. Add a border if the image needs separating from its background.
  4. Download as PNG to keep the transparent corners, or copy the CSS if it is going on a web page.

A worked example

Common radii and where they belong:

RadiusReads asTypical use
4–8pxBarely softenedThumbnails, table images
12–20pxCard-likeBlog headers, product shots
28–48pxDistinctly roundedMarketing panels, app screenshots
Half the short sideStadium / pillBanner strips, tag images

A per-corner example: a hero image that sits directly above a caption block wants 24px 24px 0 0 — rounded at the top where it meets nothing, square at the bottom where it meets the caption. Rounding all four would leave two odd gaps where the image and caption meet.

Frequently asked questions

Why not just use CSS border-radius?

Use it whenever you can — it is smaller, reversible and animatable. This tool is for destinations that do not support it: HTML email (Outlook ignores it), PDFs, print, presentation software, and platforms that accept an image and apply their own styling.

Why do my rounded corners look black?

You saved as JPEG, which has no alpha channel, so transparent corners render black. Save as PNG, or untick transparency and set a background colour matching where the image will sit.

Can I make the image a perfect circle?

Set the radius to half the shorter side on a square image and you get a circle. For anything else, the Circular Crop & Avatar Maker is the right tool — it also lets you position and zoom the photo inside the circle.

Does the border go inside or outside the image?

It is centred on the rounded path, so half sits inside the image edge and half outside. That keeps the border following the curve exactly. The image is inset by the border width so nothing is clipped.