What this tool does
It cuts the corners of an image along a curve and saves the result as a new file. Everything outside the curve becomes transparent in a PNG, or is filled with white or a color of your choice. The picture itself is not scaled or moved: a 1,200 × 800 pixel screenshot comes out as a 1,200 × 800 pixel PNG with rounded corners, or larger when you add padding. Common uses:
- Screenshots and product shots for a website, a slide or a document, where the hard corners of a window look out of place.
- App icons and logos that need the continuous "smooth" corner of modern app icons rather than a plain circle quarter.
- Cards and thumbnails where only the top corners should be round, because the bottom edge meets a text box.
- Profile pictures with a 50 percent radius, which turns a square into a circle.
Radius in percent or pixels
Percent is measured on the shorter side of the image, so the same setting looks the same on a small and a large picture: 10 percent is 80 pixels on a 1,200 × 800 screenshot and 300 pixels on a 4,000 × 3,000 photo. Pixels give an exact radius, which you need when the picture has to match a CSS border-radius or a design file. Whichever unit you pick, the tool shows the other one next to the slider. The radius can never be more than half of the shorter side; at that value two corners meet in the middle of the edge, which gives a pill or a circle.
| Setting | 1,200 × 800 screenshot | 1,080 × 1,080 square | Look |
|---|---|---|---|
| 2% | 16 px | 22 px | Barely rounded, like a window or a card |
| 10% | 80 px | 108 px | Clearly rounded, a common look for thumbnails |
| 22% | 176 px | 238 px | Close to the shape of an app icon |
| 50% | 400 px | 540 px | Pill, or a circle for a square image |
Round or smooth corners
A plain rounded corner is a straight edge that runs into a quarter circle. Where the two meet, the curvature jumps from zero to 1 divided by the radius, and the eye can see that join as a slight kink. The smooth corner avoids it: the curve begins earlier, bends gradually into a shorter circular arc and eases out again. Figma's write-up on corner smoothing describes this construction, a Bézier ramp, a circular arc and a mirrored ramp, with a smoothing parameter from 0 to 1 and gives about 0.6 as the value of the iOS icon shape. This tool uses 0.6 and draws the whole corner with cubic Bézier curves, including the arc in the middle.
A worked example: with a radius of 100 pixels, a plain corner starts curving 100 pixels before the corner point. A smooth corner starts 160 pixels before it (1.6 times the radius), and its circular middle part covers 36 degrees instead of 90. If the image is too small for that, the smoothing is reduced so the curve still fits inside half of the shorter side.
Border, padding and background
Border draws a line of the width you set along the rounded edge, inside the picture, so the file keeps its size and the border follows the curve exactly. It covers the outermost pixels of the picture, which suits screenshots and cards. Padding adds empty space around the rounded picture; the canvas grows by twice the padding, and the space is filled with the background. Background fills the corners outside the curve and the padding: Transparent keeps them see-through in a PNG, White and Color fill them. Transparent is only possible in PNG, because the PNG format stores an alpha value for every pixel; a JPG has no transparency, so a JPG always gets white or your color behind it.
How to round the corners of an image
- 1Drop an image on the box, choose one from your device or paste it. HEIC photos from an iPhone work too.
- 2Set the radius in percent or pixels and pick Round or Smooth. Switch single corners off if only some should be rounded.
- 3Add a border or padding and pick a background if you want one.
- 4Choose PNG for transparent corners or JPG for a smaller photo file and press Download image.
For a perfect circle from a photo that is not square, crop it with Crop Image to Circle. To put a frame around the picture rather than inside it, or to pad it to a square or 4:5, use Add Border to Image. The border radius generator gives you the CSS for the same corners on a web page.
Sources
- Figma: Desperately seeking squircles: the smooth corner as a Bézier ramp, a circular arc and a mirrored ramp, smoothing parameter 0 to 1, about 0.6 for the iOS shape
- W3C PNG Specification, third edition: truecolor with alpha (color type 6), section 11.2.1
- MDN: HTMLCanvasElement.toBlob(): PNG is always supported, JPEG with a quality value where the browser offers it
Related guides
- Passport Photo Size by Country: US, UK, Canada and More
- Photo Print Sizes: 4×6, 5×7, 8×10 and What Gets Cropped
- How to Compress a Photo Under 100 KB
Frequently asked questions
Is my image uploaded?
No. Your browser opens the image, rounds the corners and saves the new file on your own device. Nothing is sent to a server.
Why are the corners white instead of transparent?
You saved as JPG, or you picked a white background. JPG has no transparency, so the corners outside the curve are filled with white or with the color you chose. Save as PNG with the background on Transparent to keep the corners see-through, for example to place the picture on a colored page or a dark website.
What does Smooth corners do?
A plain rounded corner is a straight edge joined to a quarter circle, and the curvature jumps where they meet. A smooth corner eases into the curve earlier and more gradually, the continuous curve known from app icons. It is drawn here with cubic Bézier curves and a smoothing of 0.6, the value Figma gives for the iOS shape. The curve starts 1.6 times the radius away from the corner, so it needs a little more room than a plain corner.
Which radius makes a circle or a pill?
50 percent. The radius is measured on the shorter side of the image, and at 50 percent of it a square becomes a circle and a rectangle becomes a pill. For a round profile picture from a photo that is not square, crop it first with the circle cropper on this site.
Does the image keep its size?
Yes. The picture is not scaled; the saved file has the same width and height in pixels as your original, plus twice the padding if you add any. Only on iPhone and iPad, where Safari cannot draw very large canvases, an image above the limit is scaled down, and the tool says so.
Can I round only some corners?
Yes. The four corner buttons switch each corner on or off, so you can round only the top two corners of a card, or one corner of a tab.