How it works
The Rounded Corners tool applies border-radius to any image, clipping the corners to a circular arc of the specified radius. The output is a PNG with transparent corners — ready to use in presentations, social media graphics, UI mockups, and anywhere rounded rectangles are needed.
Rounded corners are a universal design pattern. App icons use 20–25% corner radius. Card UI components typically use 8–12px radius. Profile photos and avatars use 50% radius (full circle). Portrait photos in editorial layouts use 4–8px for a modern, soft feel. This tool applies the clip in seconds without needing design software.
How to use it: upload your image. Set the corner radius either as a fixed pixel value (e.g., 24px) or as a percentage of the shorter dimension (e.g., 10% gives a proportional result regardless of image size). Toggle "individual corners" mode to set different radii for each corner (top-left, top-right, bottom-right, bottom-left) — useful for tab shapes and speech bubble effects. Download as PNG (the only format that preserves transparency for rounded corners).
Circle conversion: set the radius to 50% to convert any image into a perfect circle — the standard for profile pictures. If the image isn't square, it's automatically center-cropped to square first.
CSS equivalent: this tool produces the same visual result as the CSS border-radius property, but applies it to the actual image pixels so the rounded corners are preserved when the image is used outside a browser context (e.g., in a presentation, PDF, or email).
Privacy: corner clipping uses Canvas API clip path. No image is uploaded.
Frequently Asked Questions
- Set the radius to 50% of the shorter dimension (or use the 50% preset). For non-square images, the result is an ellipse. For square images (1:1 aspect ratio), the result is a perfect circle. The tool auto-crops to square before applying 50% radius if you enable the Circle mode.
- JPG does not support transparency. Rounded corners require the trimmed corners to be transparent. PNG (and WebP) preserve that transparency. If you download as JPG, the corners will be white — which may be fine if your background is white, but will not produce the floating rounded-card look on colored backgrounds.
- Yes. Toggle Individual Corners mode and set separate values for top-left, top-right, bottom-right, and bottom-left. This lets you create shapes like tabs (one rounded corner), speech bubbles (zero radius on one corner), or asymmetric cards.
- CSS border-radius is better for web use — it doesn't require a separate image file. Use this tool when you need rounded corners embedded in the actual image pixels: for Keynote/PowerPoint presentations, for email clients that don't support CSS, or for use in apps and documents outside the browser.