About the Round Image Corners
CSS can round a corner in a stylesheet, but plenty of places cannot: an email template, a PDF, a slide, a README badge, an app store listing. Those need the curve baked into the file itself. The picture is clipped to a rounded rectangle path and exported as PNG, which is the only common format with a real alpha channel, so what falls outside the curve is genuinely empty rather than filled with white.
The radius can be typed in pixels when you are matching a design token exactly, or as a percentage of half the shorter edge, which is easier to reason about across different image sizes. At one hundred percent the curve becomes as large as the geometry allows, and the Pill option jumps straight there: a square picture turns into a circle and a wide one turns into a lozenge, which is what avatars and chips usually want.
Individual corner groups can be rounded on their own. Top two suits a card header sitting above a body panel, opposite pair gives the leaf shape used by some chat bubbles, and left or right two work for a picture that butts against a container edge. A border is drawn along the same curve after the clip, so a light rule reads cleanly against dark backgrounds. Choose a background colour instead of transparency when the destination is a format without alpha, such as a JPG in a document. For a full frame with padding and a shadow around the rounded picture, use Image Beautifier.
How to use
- Drop the image onto the left pane.
- Set Radius and pick whether it is read as pixels or as a percentage.
- Choose which Corners to round, or select the pill option for a circle or lozenge.
- Leave the background transparent for PNG use, then download the file.
Common questions
- Why is the result always a PNG?
- PNG is the widely supported format that carries an alpha channel. A JPG has no transparency, so the rounded corners would come back as solid rectangles of colour.
- How do I turn a photo into a circle?
- Choose the pill option with all four corners. A square source becomes a perfect circle; crop the picture to a square first if it is not one already.
- Can I match the radius used in my stylesheet?
- Switch the unit to pixels and type the same number your CSS uses, remembering to double it if the image will be shown at half its natural size.
- Does the border sit inside or outside the picture?
- Inside. It is stroked along the clipped edge, so the finished file keeps exactly the width and height of the original.