Round the Corners of an Image
Antialiased corners, not a staircase. Each edge pixel is sampled on a 4 by 4 grid so the arc comes out smooth, and the radius is measured against the shorter side so a wide photo and a tall one get the same visual curve.
Drop images here
or click to browse · or paste with Ctrl+V
JPG · PNG · WebP · GIF · BMP · AVIF
Measured against the shorter side, so a wide photo and a tall one get the same visual curve.
Clear corners need transparency, so export PNG or WebP. JPG has no alpha channel and will fill them with the background colour instead.
Presets
Your images are never uploaded. The corner mask and the export both run inside this browser tab.
People also use
Everything this tool does
Coverage-based antialiasing
Every edge pixel is sampled on a four by four grid and its alpha set from the fraction covered. Counted on a real corner, that gave 15 distinct alpha values along the arc against 2 for a plain inside-outside test.
Radius from the shorter side
A percentage of width would give a banner an enormous curve and a portrait almost none at the same setting. Measuring against the shorter side keeps a mixed folder looking consistent.
Radius clamped to a valid shape
Past half the shorter side, opposite corner arcs overlap and the rectangle breaks. The radius is clamped there, so fifty percent on a square is a clean circle rather than a pinched mess.
Real transparency
Corners are cut from the alpha channel, so the image layers correctly over any background instead of carrying a white block around with it.
Filled corners for JPG
Pick a corner colour when you need JPG output or a print-ready file, since JPG has no alpha channel to hold transparency.
Drag to compare
Before and after share one frame with a slider, over a checkerboard so you can actually see where transparency starts.
Six purpose-built presets
Subtle, card, soft, pill, circle and white corners, covering everything from a barely softened screenshot to a profile picture.
Batch with one ZIP
Round a whole folder with an identical radius and take everything as a single archive built in your browser.
Only edge pixels do extra work
The interior and the straight edges use a single test, so the supersampling cost applies only where it changes the result.
Nothing is uploaded
No server, no queue, nothing to delete afterwards. Close the tab and every trace of the image goes with it.
Radius reference
The radius is a percentage of the shorter side, which is what keeps the curve consistent across different shaped images. Fifty percent on a square gives a circle; fifty percent on a wide image gives a pill.
| Radius | Looks like | Use with | Good for |
|---|---|---|---|
| 2-4% | Barely softened | clear corners | Screenshots and documents |
| 6-10% | Standard card corner | clear corners | UI mockups, web images |
| 12-20% | Clearly rounded | clear or filled | Thumbnails, app icons |
| 25-35% | Pill or squircle | filled | Buttons and badges |
| 50% | Circle on a square | clear corners | Profile pictures |
| Clear corners | true transparency | PNG or WebP | Layering over any background |
| Filled corners | solid colour behind | any format | Printing and JPG output |
4x4
coverage sampling
17
alpha steps per edge pixel
0
files uploaded
0-50%
radius range
ZIP
batch download
Free
no account needed
FlipMyFormat vs other corner rounding tools
| Capability | FlipMyFormat | Typical free tool |
|---|---|---|
| Files stay in your browser | ||
| Antialiased corners, no staircase | ||
| Radius relative to the shorter side | ||
| True transparency in the corners | ||
| Filled corner colour for JPG output | ||
| Batch ZIP download without paying | ||
| No watermark on the output |
How to round corners without ruining the edge
Rounding corners sounds like the simplest possible image operation, and it is the one that most often comes back looking cheap. The reason is almost always the same: the tool decided each pixel was either inside the rounded shape or outside it, with nothing in between. That works perfectly along the straight edges, where the boundary runs exactly along the pixel grid, and it falls apart on the curve, where the true edge cuts diagonally through pixels. A pixel that is sixty percent covered gets treated as fully inside, its neighbour at forty percent gets thrown away entirely, and the result is a visible staircase that gets uglier the larger your radius. The fix is to ask how much of each pixel the shape actually covers and set the transparency to match, which is what this tool does by testing sixteen points inside every edge pixel. The second thing worth getting right is what the radius is measured against. If it is a percentage of width, then a wide banner gets an enormous curve and a tall portrait gets almost none, even at the same setting. Measuring against the shorter side means the curve looks the same on both, which is what you want when you are rounding a whole folder of mixed images for a grid. Last, remember what transparency requires. Clear corners only exist in formats with an alpha channel, so PNG or WebP. Save as JPG and those corners have to become some colour, which is why the fill option is there.
- 1
Add your images
Drag them in, click to browse, or paste with Ctrl+V. Any number at once, and the same radius is applied to each.
- 2
Set the radius
Drag the slider or tap a preset. Because it is a percentage of the shorter side, the same value looks right on portrait and landscape alike.
- 3
Export as PNG
Clear corners need an alpha channel, so PNG or WebP. If you must have JPG, switch on the corner fill colour first.
What makes a rounded corner look right
Coverage, not a yes or no answer
Along a straight edge the boundary of a rectangle runs down the gap between two columns of pixels, so deciding inside or outside is exact and the result is clean. On a curve the boundary slices diagonally through pixels, and a single yes or no answer throws away the information that a pixel was partly covered. Every edge pixel ends up either fully opaque or fully clear, which is a staircase. This tool samples each edge pixel on a four by four grid and sets the alpha from how many of those sixteen points landed inside the shape, giving seventeen possible values from fully clear to fully opaque. We counted them on a real corner: the antialiased version produced 15 distinct alpha values along the arc, while a plain inside-outside test produced 2. The straight edges and the interior are still handled with a single test, so the extra work only happens where it changes anything.
Why the radius is clamped
A rounded rectangle only stays a rectangle while the corner radius is at most half the shorter side. Push past that and opposite corner arcs start to overlap, and what you get is not a more rounded rectangle, it is a broken shape with pinched sides. Rather than let that happen, the radius is clamped to half the shorter side, which is why the slider tops out at fifty percent and why fifty percent on a square gives you a perfect circle rather than something malformed. On a wide image the same setting gives a pill, because the curve is still limited by the short dimension. We check both cases: a square at fifty percent comes back with an opaque centre and fully clear corners, and a two-to-one image at fifty percent keeps its straight top and bottom edges intact.
What people use it for
Profile pictures
Fifty percent on a square image gives a clean circular avatar with a properly antialiased edge.
UI mockups and app icons
Six to ten percent matches the corner radius most design systems use for cards and tiles.
Website thumbnails
Rounding a whole grid with one setting keeps the set visually consistent, which is hard to do by hand.
Presentation slides
Softened corners make screenshots sit more comfortably on a slide than hard rectangles do.
Product listings
Marketplaces often display images in rounded frames, so rounding beforehand avoids a mismatch.
Print materials
Use filled corners with a colour matching your layout background, since print workflows rarely handle alpha well.
Email newsletters
Many email clients ignore CSS border-radius, so rounding the image itself is the reliable way to get the look.
Social media posts
Rounded images read as more designed than raw camera output, especially in a feed of square crops.
Six tips worth knowing
Export PNG or WebP for clear corners. JPG has no alpha channel, so the corners have to become some colour.
The radius is a percentage of the shorter side, which is why the same value looks right on portrait and landscape images alike.
Fifty percent on a square gives a circle. On a wide image the same value gives a pill, because the curve is limited by the short side.
If you are rounding a grid of thumbnails, do them as one batch so the radius is identical across the whole set.
Use filled corners when the result is going into print or into a layout that does not support transparency.
Check the result over the checkerboard preview. A white background can hide the difference between transparent and white corners.
Troubleshooting
My corners came out white, not clear
You exported JPG, which has no alpha channel. Switch the output format to PNG or WebP.
The curve looks jagged
It should not, since edge pixels are antialiased. If you see steps, check whether the image was upscaled after rounding, which magnifies the original edge.
The radius looks different on my portrait images
It should not, because the radius is measured against the shorter side. If a portrait and a landscape look different, check they are actually at the same setting.
I wanted a circle but got an oval
Your image is not square. Fifty percent gives a circle only on a square; crop to square first.
Frequently asked questions
How do I round the corners of an image?
Add the image, set a radius, and export as PNG. The corners are cut from the alpha channel, so the result layers cleanly over any background.
Why do rounded corners often look jagged?
Because most tools decide each pixel is either inside the shape or outside it. On a curve the true boundary cuts diagonally through pixels, so that yes or no answer produces a staircase.
How does this tool avoid that?
Each edge pixel is sampled on a four by four grid and its transparency set from how many of those sixteen points fell inside the shape. Counted on a real corner, that produced 15 distinct alpha values along the arc against 2 without it.
What is the radius measured against?
The shorter side of the image. That way a wide banner and a tall portrait get the same visual curve at the same setting, which matters when you are processing a mixed folder.
Why does the slider stop at fifty percent?
Because a rounded rectangle stops being one past that point. At more than half the shorter side, opposite corner arcs overlap and the shape pinches. Fifty percent on a square is already a full circle.
Can I get a circular image?
Yes, set the radius to fifty percent on a square image. If your image is not square you will get an oval, so crop to square first.
Which format should I export?
PNG or WebP, because clear corners need an alpha channel. JPG cannot store transparency at all.
What if I need a JPG?
Switch on the corner fill colour and choose something matching the background it will sit on. The corners become that solid colour instead of transparent.
Does rounding change the image size?
No. The output keeps your original width and height; only the corner pixels change their transparency or colour.
Can I round only some corners?
Not at the moment. All four corners get the same radius. Per-corner control is a candidate for a future version.
Will the rounded image work in an email?
Yes, and it is usually the more reliable route, because many email clients ignore CSS border-radius. Rounding the image itself always renders.
Are my images uploaded to a server?
No. The corner mask and the export both run in your browser using the canvas API. Nothing is sent anywhere and the tool keeps working if your connection drops after the page loads.
Can I round a whole folder at once?
Yes. Add as many images as you like and the same radius is applied to each. Download individually or take the set as a single ZIP built in your browser.
Does the file get bigger?
A PNG with transparency is usually slightly larger than one without, since the alpha channel has to be stored. The difference is small for corners alone.
Why does the preview show a checkerboard?
That is the standard way to show transparency. Anywhere you see the checkerboard through the image, those pixels are actually clear rather than white.
Can this replace CSS border-radius on a website?
It can, though CSS is usually better on the web because it adapts to any size. Rounding the file is the right choice for email, for print and for platforms that will not let you style the image.
Is the effect reversible?
The corner pixels are discarded, so no. Your uploaded file is never modified, so keep the original.
Does it add a watermark or need an account?
No to both. No sign-up, no email wall, no daily limit and no watermark on the output.