Click or drag images here to upload
Supports PNG, JPG, WebP, GIF, SVG formats · Batch upload supported
Upload an image to preview the effect
This image border radius generator is simple and intuitive. Here is a step-by-step guide:
Upload Images: Click the upload area or drag and drop images directly onto the page. Supports PNG, JPG, WebP, GIF, SVG, and other common formats, with batch upload supported. After uploading, a thumbnail grid will appear below. Click any thumbnail to select it for preview and editing.
Adjust Corners: The tool offers two corner modes. In "Uniform" mode, drag the slider to adjust all four corners simultaneously—0% for sharp corners and 100% for maximum rounding (ideal for circular avatars). In "Individual" mode, adjust each corner (top-left, top-right, bottom-left, bottom-right) independently for creative asymmetric effects.
Set Background: The default export background is transparent (PNG format), suitable for overlaying onto any background. You can also choose white or a custom color. When exporting as JPG, transparent areas will be filled with the selected background color.
Export & Download: After confirming the preview looks good, select the export format (PNG/JPG/WebP) and click "Download". If you uploaded multiple images, use "Download All" to export all processed images at once. JPG supports adjustable compression quality (10%-100%), while PNG exports are lossless.
Rounded corners are widely used in web design and content creation. Here are some typical scenarios:
Social Media Avatars: Major platforms like Twitter/X, Discord, LinkedIn, and Instagram use circular or rounded avatar designs. Use this tool to crop a photo to a 1:1 square, then set the radius to 100% to create a perfect circle. Export as PNG with a transparent background for a clean circular avatar asset.
UI Component Assets: In app and web interface design, cards, buttons, modals, and other components commonly use rounded corners. Designers can use this tool to batch-process screenshots or assets into a consistent rounded style. The individual corner mode also enables special shapes like rounded-top-flat-bottom for tags and chat bubbles.
Content Image Enhancement: In blog posts, social media carousels, and presentations, sharp-cornered images can look harsh, while rounded images feel more modern and friendly. Use this tool to batch-apply a subtle 8px-16px radius to all配图 for a more polished and professional layout that improves the reading experience.
CSS border-radius Principle: In web development, the border-radius property rounds element corners by replacing them with ellipses or circles. When different values are used for each corner, you can write border-radius: 10px 20px 30px 40px to specify them individually. Percentage values are calculated based on the element's width and height, so border-radius: 50% on a square produces a perfect circle.
Rounded Corners and User Experience: Research shows that the human eye processes rounded shapes faster than sharp angles. Rounded corners reduce cognitive load and make interfaces feel friendlier and safer. Both iOS and Material Design systems extensively use rounded elements, reflecting a major trend in modern UI design.
Transparency and Rounded Corners: When an image with rounded corners is exported as PNG, the area outside the rounded corners is clipped and filled with transparency. This allows the rounded image to seamlessly overlay any background without visible sharp edges. Note that JPG does not support transparency—the clipped areas will be filled with the selected background color (default white).
Supports uploading PNG, JPG, JPEG, WebP, GIF, BMP, and SVG. Export supports PNG (with transparency), JPG, and WebP formats.
Yes, all image processing is done locally in your browser using the HTML5 Canvas API. Your images are never uploaded to any server, ensuring complete privacy.
Upload a square image and set all corner radii to maximum (100%) to create a perfect circle. Export as PNG with a transparent background for best results.
Yes, you can upload multiple images at once. The tool will apply the same corner radius settings to all images and supports batch download.
Corner radius is specified as a percentage (%) of the image's smaller dimension. 50% equals half the image width, and 100% creates the maximum possible rounded corner.
The tool preserves the original resolution. PNG exports are lossless, while JPG exports support adjustable compression quality (0-100). Anti-aliasing is applied to corner edges for smooth results.
If the original image has low resolution, the rounded edges may appear pixelated. We recommend uploading high-resolution images for the best results. The tool applies anti-aliasing to smooth the edges.