Rounded Corners Image Tool

The landing page was done. Two-column layout, polished copy, a product shot and an app screenshot sitting side by side in cards with 16-pixel corners. Then the screenshots went in — square, because every export from the design tool comes out square unless you remember to fix it — and suddenly the page looked like a prototype from 2011. One detail. All that polish, undone by four 90-degree angles.

The usual fixes are all heavier than the problem. Open Figma or Photoshop to drag a rectangle mask around one image. Write a CSS wrapper and pray the image never travels without it. And travel it does: the same screenshot goes into an email newsletter, where Outlook desktop ignores border-radius. It gets attached to a PDF, pasted into a slide deck, uploaded to a marketplace listing that renders your image untouched. Style layers do not survive the trip. Baked-in corners do.

That is the job of this tool: one slider, one preview, one download. Drop any JPG, PNG, or WebP on the page, drag the radius until it looks right, and export a PNG with clean, anti-aliased, transparent corners that render correctly everywhere — no CSS required, no design app, no account. There is also a generated CSS snippet for developers who want matching styling on the container instead. Ten seconds, either way.

1. 1

   Drop your image in

   Drag a file onto the tool, paste a screenshot straight from the clipboard, or tap to pick one from your camera roll. JPG, PNG, and WebP all work, and there is no size gate beyond what your browser can comfortably hold in memory.

2. 2

   Drag the radius slider

   The preview updates live as you drag, from 0 pixels — untouched — up to half the shorter side, which turns the image into a circle or stadium shape. Watch the corners at full zoom if you care about edge smoothness; the preview renders the real output.

3. 3

   Choose your corner style

   Apply the radius to all four corners at once, or set individual corners if you need the classic notched card look — rounded on top, square at the bottom, or any other combination.

4. 4

   Set the output details

   Pick PNG for transparent corners. If you must export JPG, choose the fill color that replaces the transparent wedges — white, black, or any hex value you enter. The preview shows exactly what the fill will look like.

5. 5

   Download or copy the CSS

   Save the rounded PNG, or grab the generated border-radius snippet if the image will live inside a container you control. Doing both is a common pattern: bake corners for the email version, style them in CSS for the web version.

Rounding corners does not cut the image. It composites: the tool draws your image onto a canvas, then paints a mask over the corners that sets each pixel's alpha — its transparency value — to zero outside the corner arc. Every pixel inside the arc keeps its original red, green, blue, and alpha values, bit for bit. Only the alpha channel of the corner regions changes.

The shape of that mask is a quarter-ellipse per corner. With a uniform radius r, each corner arc is centered exactly r pixels in from both edges, and pixels survive if their distance from that center stays under r. That is the same geometric model CSS uses for border-radius, which is why baked corners and styled corners look identical at the same scale.

The hard part is the edge of the arc, and it is where cheap tools give themselves away. A naive implementation snaps every pixel to fully in or fully out, and the diagonal edge turns into a staircase — visibly jaggy at any normal viewing size. The fix is anti-aliasing by supersampling: each boundary pixel is subdivided into a 4×4 grid of 16 subsamples, the arc test runs on each subsample, and the fraction that falls inside becomes the pixel's alpha. A pixel that is 11 of 16 inside gets alpha 175 instead of an all-or-nothing jump. Sixteen levels of softness along the curve — that is what makes the corner read as a smooth arc rather than pixels.

One more piece of the model is worth knowing because it explains a quirk you will eventually hit. In CSS, when two adjacent corner radii add up to more than the side between them, the spec proportionally shrinks all radii until they fit — that is how border-radius: 9999px gracefully collapses into a stadium pill instead of exploding. A canvas mask has no such auto-correction, so this tool clamps the radius at half the shorter side, which produces the same visual result without surprising you mid-drag.

Say you have a 1200×628 open-graph banner and you want the softened look. Half the shorter side is 314, so anything up to a full circle-of-stadium is available. Here is how the options read in practice:

Walk the geometry for the 48-pixel case. The top-left arc's center sits at (48, 48). A pixel's center at (47.5, 47.5) is 0.7 pixels from that center — deep inside, alpha stays 255. The pixel whose center sits at (0.5, 0.5) is 67.2 pixels away — far outside, alpha 0. The interesting ones live along the diagonal: the pixel at (13.5, 13.5) is 48.8 pixels out, just clipped; the pixel at (14.5, 14.5) is 47.4 pixels out, just inside. Between those two, the arc crosses, and every pixel straddling that line gets fractional alpha from supersampling. That transition band — roughly two pixels wide — is the entire visible difference between a crisp professional corner and a jagged one.

/* For the container, if you keep the original square image */
.hero-card img {
  border-radius: 24px; /* = 48 device px at 2x DPR */
  display: block;
}

A hero image rarely travels alone — it ships with a card-sized version and a thumbnail, and the corner treatment is where the family resemblance survives or dies. Run a fixed 24-pixel radius through the three sizes and watch what the same number becomes:

Two coherent systems exist, and the mistake is mixing them. The percentage system answers to the image: every export gets the same visual weight, which is what a family of product photos wants. The fixed-pixel system answers to the interface: a 24-pixel corner on an image matches the 24-pixel corners of the buttons and cards around it, which is what a design system wants — and matching the component library usually wins for UI screenshots.

When the fixed-pixel route is the right one, keep the density arithmetic honest. Export at 2x resolution with a 48-pixel radius, display at half size, and write border-radius: 24px on the container — the baked corners and the surrounding chrome then agree at every zoom level. The same export shipped at 3x would want 72-pixel baked corners to still render as 24 CSS pixels; the snippet generator does this conversion, but knowing the shape of the arithmetic keeps a multi-density export set from drifting.

Most of what can go wrong has nothing to do with the slider and everything to do with the file format and the batch. Here are the traps we have hit ourselves, repeatedly.

• JPG output cannot be transparent. If you export JPG, the corners fill with your chosen color. This is a format constraint, not a tool decision — JPG has no alpha channel to write to.
• Re-rounding an already-rounded image stacks the arcs. The second pass eats into corners shaped by the first. Always round from the original.
• A fixed pixel radius is not visually consistent across sizes. 24 pixels on a 2400-pixel image is subtle; the same 24 on a 240-pixel thumbnail is a fifth of the height. Switch to a percentage when the outputs differ in size.
• Tiny images need tiny radii. On a 16×16 favicon, a 3-pixel radius is already 18.75 percent; anything more and the mark starts dissolving.
• Content sitting in the corner dies first. Rounded corners crop — a price badge or timestamp parked in the top-right corner will lose its edges at large radii. Check the preview before exporting.

Rounding is free; the format you export into is not. Measured on the same 800×600 photographic source with 48-pixel corners applied, the four realistic outputs split by an order of magnitude — and the differences are structural, not settings:

The PNG number surprises people until the mechanics are named: a photographic image carries high per-pixel entropy, PNG stores it losslessly, and the alpha channel rides along on top — the corners cost almost nothing, but the format re-prices the whole file. That makes PNG the right answer for flat-color screenshots, charts, and UI captures (where it often beats JPG), and a heavy one for camera-derived photos.

WebP with alpha is the quiet best option for the web-hosted case: both measured tests landed at or under the original JPG's size while carrying full transparency. The exceptions worth respecting: older email toolchains and some marketplace upload pipelines still expect JPG or PNG by name, and a few embedded contexts lack a WebP decoder — which is why the JPG-with-exact-fill trick remains worth knowing. A 32-kilobyte JPG whose corners match the listing page's white beats a 650-kilobyte PNG on a product carousel.

Three support threads from the corner queue, anonymized, each with the arithmetic that diagnosed it:

The mismatched card row. A three-card feature row where two images had corners baked at 24 pixels on 600-wide exports and the third — a legacy asset — relied on CSS border-radius: 24px. Displayed at 300 pixels wide, the baked corners rendered at an effective 12 CSS pixels against the stylesheet's 24. One radius number, two visual sizes, because one lived in device pixels and the other in CSS pixels. Re-exporting the pair at 48 pixels fixed the row without touching the stylesheet.

The newsletter that squared itself. A 480-pixel hero rounded with CSS looked correct in Apple Mail and Gmail, then snapped to square in Outlook on Windows desktop, whose Word-derived rendering engine ignores border-radius on images. The fix was baking PNG alpha — at the cost of the file growing from a 38 KB JPG to a 340 KB PNG, because photographic content in a lossless format is expensive. WebP would have shrunk it, but WebP support across mail clients is its own gamble; in email, PNG with alpha is the floor that actually ships.

The icon batch that dissolved. Forty-eight-pixel UI icons rounded at 8 pixels — 16.7 percent of the icon — kept their arcs but lost their strokes: the anti-aliased edge consumed a visible share of two-pixel linework. Dropping to a 4-pixel radius (8.3 percent) preserved the shape language while keeping the strokes readable. Small canvases spend radius faster than large ones; the percentage system finds that line automatically.

Three different failure modes — density mismatch, client rendering, scale sensitivity — and one shared habit would have caught all of them: test the export in the destination, not in the editor.

The queue for this tool is longer than you would expect, because square corners hide in more workflows than anyone admits.

• Email marketers — pre-rounding images because CSS support in mail clients is a minefield and Outlook desktop is the mine.
• Marketplace sellers — product images that must look consistent inside listing cards they do not control.
• App marketers — screenshots with device-frame corners that need a matching radius on the image inside the frame.
• Documentation writers — figures and diagrams pasted into PDFs and wikis where no stylesheet will ever run.
• Course creators and slide builders — thumbnails that get pasted, not embedded, into decks and LMS pages.
• Sticker and badge makers — rounding toward the stadium and circle end of the slider for avatar-shaped assets.

Developers show up too, usually on their way somewhere else: rounding an og:image, pre-shaping icons for a design system, or generating placeholder art with the exact radius the production CSS will use. The Image Resizer handles the dimension changes those jobs often need alongside the rounding.

Baked alpha is one option among several, and picking the wrong one is how corners break six months later. The honest comparison:

The rule of thumb we use: if the image will ever be downloaded, forwarded, attached, or uploaded somewhere you do not control, bake the corners. If it lives and dies inside your own layout, keep the original clean and let CSS do the work — you can change the radius in one line instead of re-exporting fifty images. The hybrid is common and reasonable: rounded PNG for email, Image Cropper for the aspect fix, and a styled container for the hero on the site itself.

There is a fifth option people ask about: squircles, the superellipse corners Apple popularized. A true squircle is not an ellipse, so neither border-radius nor a simple arc mask reproduces it exactly; it needs an SVG path or a clip-path polygon with enough points. If your brand genuinely requires superellipse corners, treat this tool's output as the 95 percent solution and reach for vector tooling for the last five.

The squircle has an exact equation, which explains why it cannot be faked with radii. A rounded rectangle follows the superellipse |x ÷ r|ⁿ + |y ÷ r|ⁿ = 1 with n = 2 — the ordinary ellipse. Apple's continuous corners live near n = 4 to 5, where the corner flattens into a smooth tangent with the straight edge instead of meeting it at a visible transition. No value of border-radius reproduces that curve, because border-radius is always the n = 2 family; approximating a squircle means an SVG path or a high-vertex clip-path polygon, generated from the equation at whatever precision the eye demands.

Rounding happens entirely in your browser. The file is read with the standard File API, drawn to an in-memory canvas, and the mask math runs on that canvas — no request carries your image anywhere, because there is no server-side step to carry it to. Close the tab and the image is gone from memory, full stop.

That matters more with this tool than with, say, a word counter. The images people round are pre-launch screenshots, unreleased product shots, client mockups under NDA — exactly the files you do not want sitting in a queue on someone's upload server or retained in cloud storage after processing. Local execution means there is no queue, no retention policy to read, and no account required. It also means the tool works on a plane, behind a firewall, and on a phone in a dead zone, since nothing needs a round trip once the page has loaded.

If you need a full circle rather than a rounded rectangle — avatars, profile badges, sticker cutouts — the Circle Image Cropper next door does that in one move instead of making you calculate half-widths here.

Rounding is usually the last step of a small pipeline. Three neighbors finish it:

• Circle Image Cropper — when the destination is an avatar or profile badge and you want the circle in one move
• Image Cropper — fix the aspect ratio before rounding, because a stadium shape on the wrong ratio looks accidental
• Image Resizer — generate the 2x, 1x, and thumbnail sizes, then round each with a percentage radius so they match visually

The order matters: crop, resize, round. Rounding before resizing means every resample re-interprets your beautiful anti-aliased corners, and the second interpolation never looks as clean as the first.