To round image corners for an email attachment, bake the rounded shape into the PNG itself using a 1–50% radius applied to the image's shorter side, then download a full-resolution PNG; this keeps the rounded look intact because email clients and attachment viewers ignore most CSS. CSS border-radius in HTML email is unreliable across Gmail, Outlook Web, and mobile mail apps, and a downloaded image attached to a message is rendered as a flat bitmap with no styles applied. The clean answer is to round the corners locally, keep the same width and height, and export a transparent PNG that the email client or the recipient's attachment viewer will display exactly as you prepared it. Email attachments often carry sensitive material — client photos, contracts, screenshots of unreleased UI — so it also helps that the only copy of the file that leaves your device is the PNG you choose to attach. This guide explains when this approach is the right one, which radius to choose, and how to get a same-size PNG file out of Round Image Corners in three short steps.
Why email attachments need rounded corners baked in, not styled
Inline images in HTML email can use inline CSS for border-radius, but support is uneven across clients. Outlook on Windows ignores it, Gmail's web composer strips most class-based styles, and many mobile clients flatten the markup. Even where CSS works, it only affects how the inline image is rendered inside the recipient's inbox — it does not change the file the recipient downloads or saves.
Attachments behave like any other image on disk: the mail client shows the bitmap. There is no stylesheet attached to a file icon or a thumbnail. If you want rounded corners on the image the recipient sees and saves, those corners have to be part of the pixels. A PNG with transparent corners is the most portable way to do that, because the curve is already in the file and looks correct regardless of the viewer.
That is the gap Round Image Corners fills: it produces a same-size PNG with transparent rounded corners, ready to attach to a message, embed in a layout that does not support CSS, or drop into a slide deck without further editing.
| Email context | Does CSS border-radius reach the recipient? | Are pre-rounded pixels required? |
|---|---|---|
| Inline image in HTML email | Inconsistent (stripped in Gmail web, ignored by Outlook on Windows) | Yes, for cross-client look |
| Attached image file (PNG or JPG) | No — rendered as a flat bitmap | Yes |
| Email signature avatar (managed by mail client) | Usually stripped or overridden | Yes, for portability |
| Image embedded in a PDF attachment | No — PDF rendering uses PDF styles only | Yes |
How to round image corners for an email attachment
The three-step workflow below covers the typical case of a JPG portrait, a PNG logo, or a WebP graphic that you want to attach to a message.
- Choose a local file. Open Round Image Corners and pick a JPG, PNG, or WebP that fits the displayed limits — up to 25 MiB on disk and within the browser's safety cap of 20,000 pixels per side and 40 megapixels in total. Photos straight from a phone or screenshots usually fit; huge panoramas might not.
- Set the radius. Move the radius control anywhere from 1% to 50%. The percentage is calculated against the shorter side of the image, so the curve looks balanced whether the source is landscape, square, or portrait. A small percentage softens the corner; a large percentage approaches a rounded rectangle.
- Create the PNG and download. Select Round corners, inspect the same-size PNG preview, and download the file. The downloaded PNG keeps the source width and height — the file is not silently resized — and the filename ends in -rounded-corners.png, making the format change obvious in your email draft.
If the first radius is not quite right, change the slider and select Round corners again. No re-upload is needed, because the file is held in memory for the lifetime of the tab. Invalid files, decode failures, or unsupported formats show visible errors instead of producing a partial result.
How the 1–50% radius maps to actual pixels
The percentage control is grounded in a single rule: the radius is computed from the shorter side of the image and then rounded to a whole output pixel. For a 400 by 200 pixel image, the shorter side is 200, so 25% produces a 50 pixel radius (200 × 0.25 = 50). For a 1920 by 1080 photo, the shorter side is 1080, so 10% gives a 108 pixel radius and 50% reaches the maximum valid rounded-rectangle curve of 540 pixels.
Portrait sources follow the same rule using their width: a 1080 by 1920 phone photo with a 30% setting gives 1080 × 0.30 = 324 pixels of corner radius. Because the formula is identical for every aspect ratio, the control is predictable: the same percentage on different images yields curves of proportional weight rather than identical pixel counts.
| Image size (W × H) | Shorter side | Radius at 10% | Radius at 25% | Radius at 50% |
|---|---|---|---|---|
| 400 × 200 | 200 px | 20 px | 50 px | 100 px |
| 800 × 800 | 800 px | 80 px | 200 px | 400 px |
| 1920 × 1080 | 1080 px | 108 px | 270 px | 540 px |
| 1080 × 1920 | 1080 px | 108 px | 270 px | 540 px |
The canvas that holds the result is one natural-size canvas. The tool clears it to transparency, traces a rounded-rectangle clipping path, draws the decoded source once at its original dimensions, and exports PNG. Under the hood, the rounded-rectangle clipping path uses the standard canvas roundRect and clip APIs, so the curve is mathematically precise rather than approximated. This is also why the preview is scaled only for display, not for download, and why the result line should always report dimensions that match the source.
Picking a radius that fits your email context
A subtle radius reads as polished; an aggressive radius reads as a sticker. The right value depends on where the rounded image lands in the message.
- Signature photo or avatar: 30–50% on a roughly square source approaches a circular profile picture, which is a common visual convention for "person" in mail apps.
- Inline banner or hero image: 5–15% gives a soft, modern feel without making the image look cut off in a narrow preview pane.
- Logo or product thumbnail attached to a proposal: 10–20% is enough to soften hard square edges without losing the brand silhouette.
- Decorative sticker-style attachment: 40–50% on a roughly square source approaches a pill or near-circle shape.
These are starting points rather than rules. Because the slider can be moved without re-uploading, it costs nothing to try a few values on the same image and pick the one that looks right at the actual attachment size.
Why PNG matters for attachment transparency
Rounded corners in this tool rely on transparent corner pixels. JPEG cannot store transparency, so saving the result as JPG would fill the corners with white or another solid color and erase the rounded shape. PNG is required to keep the curve transparent, which is also why the output filename ends in .png regardless of the source type. If you need a JPG output for size reasons, the corners will need to be composited onto a background color first.
A few consequences to be aware of:
- JPEG sources are decoded and re-encoded as PNG. The output PNG may be larger than the original JPG. The result line shows the approximate output file size so you can decide whether it still fits your mail provider's attachment limit.
- EXIF metadata is not preserved. Canvas-based export creates new PNG pixels and does not copy source metadata. If you need to strip or replace EXIF, do it as a separate step or use a dedicated metadata tool.
- Existing transparency in PNG or WebP sources is preserved within the clipped shape, subject to the browser's normal decoding and PNG encoding. Pixels that were already transparent stay transparent inside the curve; pixels outside the rounded rectangle become transparent in the output.
If the original is a JPG and the goal is specifically to convert it to a PNG for the email, the same considerations apply. See this focused guide on converting JPG to PNG for an email attachment locally for a format-only workflow.
Privacy and local processing for email-ready files
Attachments are often the most sensitive part of an email thread: contracts, ID photos, screenshots of internal tools, unreleased product shots. Sending those to a server just to add a curve is unnecessary. The tool's implementation decodes the chosen file, computes the rounded-rectangle clipping path, draws the source once at its original size, encodes the result, and offers a download — all inside the current browser tab. Temporary Object URLs are revoked when they are replaced or when the tab closes, and a stale asynchronous export cannot overwrite a newer choice.
There is no account, no sign-up, and no upload step in the workflow. If you want to verify the output before attaching it, the result line reports source-matching width and height, the computed whole-pixel radius, the output format, and the approximate file size. Those four numbers are enough to check that a wide or tall source was not silently resized.
What this tool does not do
Round Image Corners is deliberately focused on one transformation: clip a local JPG, PNG, or WebP to a same-size rounded rectangle and export PNG. It does not offer separate radii for each corner, masks, circles, decorative borders, drop shadows, gradients, or background fills. There is no batch mode and no metadata retention. If a project needs those controls or a reversible source file, a layered desktop editor is the right next step.
For the specific job of preparing a same-size PNG with transparent rounded corners to attach to an email — without uploading the file — Round Image Corners covers the full path: pick the file, set the radius, inspect the same-size preview, and download the PNG.
For a deeper look, see Resize a GIF for Email Attachment in Your Browser.