CrispKit › Guides

How to round the corners of an image

By CrispKit · Last updated

To round the corners of an image, choose a corner radius, cut each corner along a quarter circle of that radius, and save the result as a PNG so the cut-off corners are transparent. Save as JPG and the corners are filled with a solid color instead.

Fastest route: open Round Corners on Image, drop in the picture, move the radius slider and download.

Radius: pixels or percent

The radius is the size of the circle each corner follows. A bigger radius gives a rounder corner. You can set it two ways:

Here's what a percent radius comes to in pixels on common image sizes, using the shorter side:

Image size5%8%10%25%50%
1080 × 1080 (square post)54 px86.4 px108 px270 px540 px, a circle
1920 × 1080 (16:9)54 px86.4 px108 px270 px540 px, a pill
1600 × 1200 (4:3)60 px96 px120 px300 px600 px, a pill
800 × 60030 px48 px60 px150 px300 px, a pill

Round Corners on Image starts at 8%, a soft rounding that doesn't eat into the picture.

How much of the picture you lose

A round corner of radius r trims r² × (1 − π ÷ 4), about 21.5% of an r × r square, from each corner. At 8% on a 1600 × 1200 photo the radius is 96 px, so each corner loses about 1,978 pixels and all four together lose about 0.41% of the picture. At 25% the radius is 300 px and the four corners take about 4% of the picture, so keep text away from the corners.

How to round the corners, step by step

  1. Choose the image, or several: the same settings apply to all of them.
  2. Set the radius in px or %.
  3. Pick the corners. Turn off any corner you want to keep square, for example only the top two for a card, or give each corner its own radius.
  4. Choose round or squircle. Round corners are quarter circles. Squircle corners follow a superellipse that leaves the straight edge more gently, like an app icon.
  5. Save as PNG or WebP for transparent corners, or JPG with a background color you pick.

Rounded corners in Canva, Word and CSS

img { border-radius: 16px; }

One difference from a percent radius in the tool: in CSS, a percentage is measured against the box's width for the horizontal radius and its height for the vertical one. On a rectangle, border-radius: 10% makes oval corners, not round ones. Use a pixel value, or a percent of the shorter side as Round Corners on Image does, to keep them round.

Do it with the free Round Corners on Image tool

  1. Open Round Corners on Image and choose one image or up to 100.
  2. Set the radius in px or %, pick the corners, and add a border or shadow if you like.
  3. Download a PNG with transparent corners, or a ZIP for many images.

It runs in your browser: your images aren't uploaded, and there's no watermark. Animated GIFs can stay animated, with every frame rounded.

Open Round Corners on Image

FAQ

How do I round the corners of a photo?

Pick a corner radius, cut the corners, and save as PNG. In Round Corners on Image that's: choose the photo, move the radius slider, download.

How do I round the corners of a photo on iPhone?

Open Round Corners on Image in Safari, tap Choose images and pick the photo, set the radius, and tap Download. Keep the format on PNG for transparent corners.

Can I round corners in Canva?

Yes. Canva's help page says to select the image, choose Corners, and adjust Corner rounding.

How do I make an image's corners rounded in Word?

Select the picture, go to Picture Format, click the arrow next to Crop, choose Crop to Shape and pick a rounded rectangle. That rounds it inside the document. For a separate image file with rounded, transparent corners, use a tool that saves a PNG.

Why are my rounded corners white instead of transparent?

The image was saved as JPG, which can't store transparency, so the corners were filled. Save as PNG or WebP. Some apps also show transparent areas as white or black even though the file is transparent.

What radius makes a circle?

50% of the shorter side. On a square image that's a perfect circle; for a circle profile picture, the circle pfp guide covers cropping and sizes.

Related

Sources

Each page below was read on 27 October 2026. The radius and area numbers are worked out with the formulas in Round Corners on Image's own code.

  1. W3C, CSS Backgrounds and Borders Module Level 3, §4 Rounded corners. The two radii "define the radii of a quarter ellipse"; horizontal percentages refer to the width of the border box, vertical ones to its height; overlapping radii are scaled down proportionally. Candidate Recommendation Draft, 11 March 2024.
  2. Canva Help Center, Add borders and rounded corners to elements. Select the image, then Corners, and adjust Corner rounding with the slider or input field. Rendered in a browser.
  3. Microsoft Support, Crop a picture to fit in a shape. Picture Format, the arrow next to Crop, Crop to Shape; shapes include "a rounded rectangle"; the same steps work in Word, PowerPoint, Outlook and Excel.
  4. W3C, PNG Specification (Third Edition), §4.2. Alpha "zero means fully transparent". W3C Recommendation, 24 June 2025.