Round Image Corners

Click to upload an image

JPG / PNG / WEBP

Corner preset

Corner radius

20%
050%

Output format

Upload image to show preview

Add rounded corners to images online with real-time slider preview. Choose from Small, Medium, Large presets or customize radius, output transparent PNG for any background, processed locally in your browser.

Related

ICO Generator

Image Cropper

Image Resizer

Image Compressor

Image Converter

What is Image Corner Rounding?

Image corner rounding replaces a picture's four sharp corners with smooth curved arcs. This tool draws a rounded rectangle path using Canvas arcTo(), then calls clip() to crop the image within that path—unfilled areas become Alpha=0 transparent pixels when exporting PNG.

**What do rounded corners look like visually?** Rounded corners feel softer and friendlier than sharp corners, reducing visual harshness. Widely used in UI design for app icons, buttons, cards, and avatars. iOS popularized the even smoother "Superellipse" (squircle) shape.

**Why do many app icons require rounded corners?** iOS/iPadOS/macOS Big Sur+ automatically apply corner masks to app icons, but white backgrounds on originals cause "white edge" artifacts. The solution is pre-generating rounded PNGs at source so the system doesn't re-crop; this tool serves exactly that purpose.

**Pixels vs Percentages:** Pixels offer precision but don't align across sizes; percentages scale adaptively for consistent results across dimensions. Design systems typically use percentages—e.g., 22.37% for iOS, 25% for Android Adaptive Icons.

**Difference from CSS border-radius:** CSS border-radius is display-layer only, exported images still have sharp corners. This tool generates real PNG files with alpha channels usable anywhere CSS isn't available (PPT, video, print).

Use Cases

  • Create social media profile pictures (Twitter/X, Instagram, Facebook, Discord, LinkedIn) with one-click circular avatars
  • Quickly add rounded corners to app icons (iOS recommends 22-25%, Android Adaptive Icon recommends 25%)
  • E-commerce product images look softer and more appealing with rounded corners, improving click-through rates
  • Process rounded corner image assets locally for presentations, video editing, and print materials
  • Batch-produce consistently sized icons and assets for design systems (process one image at a time)

How to Use

  1. Click the upload area to select an image, or drag and drop a JPG/PNG/WEBP file directly into the upload zone
  2. Choose Small (10%), Medium (25%), or Large (50%) preset for instant rounding, or drag the slider for custom values (click to toggle pixel/percentage units)
  3. Select output format: PNG (transparent background) / WEBP (smaller size) / JPG (white background)
  4. Preview the rounded effect in real-time on the right, then click Download—file saves automatically with -rounded suffix

Features

  • Dual unit support: Toggle between pixel (0-500px) and percentage (0-50%) radius modes for different scenarios
  • 3 presets: Small (10%), Medium (25%), Large (50%) one-click presets plus custom slider adjustment
  • Three output formats: PNG (with alpha), WEBP (smaller size), JPG (white background, no transparency)
  • Real-time preview: Instantly see rounded corner effect as you adjust, checkerboard shows transparent areas
  • Drag & drop upload: Click or drag images to upload area, supports JPG/PNG/WEBP input formats
  • Local processing: All operations run in browser Canvas, images never uploaded to any server

Best Practices

Choose PNG when you need transparent backgrounds, not JPG

JPG doesn't support transparency and forces white fill, creating ugly white blocks in corner areas. Only use JPG when you're certain transparency isn't needed; default to PNG otherwise.

Choose WEBP for small file sizes with transparency

WEBP supports transparency at 25-35% smaller sizes than PNG, ideal for web assets. Note that some older design software may not recognize WEBP; use PNG for cross-software collaboration.

App icon corner radius recommendations

iOS automatically applies ~22.37% corner mask to app icons, but white backgrounds cause white-edge artifacts. Pre-generate rounded PNGs first (recommend 22-25%). Android Adaptive Icons recommend 25% as safe zone.

Use 50% radius for perfect circle avatars

Twitter, Instagram, Facebook, Discord, and most social platforms use circular avatars. The 50% preset instantly generates circular PNGs with transparent backgrounds that work on dark/light themes.

iOS App Icon Guidelines

Don't apply CSS border-radius to already-rounded PNGs

If you've exported a rounded PNG from this tool, don't wrap it in another CSS border-radius + overflow:hidden container. Double processing causes unclear edges. Display rounded images directly with img tag.

For complex corners (different per corner, top-only TabBar)

This tool only supports uniform corners on all four sides. For TabBar top-only rounding, bottom-only rounding, or different-radius-per-corner scenarios, use the [Image Editor](/image/image-editor/) or professional tools like Figma.

FAQ

How do I add rounded corners to an image?

Upload your image, then click Small/Medium/Large preset buttons for common corner radii, or drag the slider for custom pixel (0-500px) or percentage (0-50%) values. Preview the rounded effect in real-time on the right, then click Download when satisfied. PNG format automatically preserves transparent background.

Should I use pixels or percentages for corner radius?

Pixels are ideal for precise control on fixed-size designs. Percentages scale proportionally to the shorter edge, working consistently across different image sizes. Toggle between units instantly; 50% radius creates a perfect circle, great for profile pictures.

What color are the corner areas?

With PNG or WEBP format, corners are fully transparent pixels (Alpha=0) that blend naturally on any background. With JPG format, corners are filled with white (yellow warning shown), suitable for final images that don't need transparency.

What image formats are supported?

Input accepts JPG, PNG, and WEBP formats. Output can be PNG (transparent), WEBP (smaller file), or JPG (white background). Output filenames automatically get a -rounded suffix for easy differentiation from originals.

Is there a limit to corner radius?

Percentage mode ranges 0-50% (50% = perfect circle). Pixel mode ranges 0-500px. Larger values create rounder corners; reaching half the shorter edge creates a circle. Uses standard Canvas arcTo + clip (not Squircle/superellipse).

Can I make avatars or app icons?

Absolutely. For circular avatars use the 50% preset for instant results. iOS app icons recommend 22-25% (25% preset matches well), Android Adaptive Icons recommend 25% as safe zone. Output PNG with transparency adapts to any theme.

Will rounding corners make my image blurry?

No. This tool clips paths at original resolution via Canvas without resampling or compression. Rounded image quality matches the original exactly. Corners are true transparent pixels, not blurred transitions, so edges stay crisp.

Will my images be uploaded or shared?

No. All processing happens locally in your browser via Canvas API. Images never leave your device from upload to download. Safe to use with private photos, ID pictures, avatars, and other sensitive materials.

Why aren't rounded corners showing?

Check: ① Radius value is greater than 0 (slider not at far left); ② Image loaded successfully (must be JPG/PNG/WEBP); ③ Browser supports HTML5 Canvas (all modern browsers do). If issues persist, refresh and re-upload.

How is this different from CSS border-radius?

CSS border-radius is display-layer only—exported images still have sharp corners and only work in web contexts. This tool generates a real PNG file with alpha channel that works in PPT, videos, print, and anywhere CSS isn't available.

Glossary

Border Radius
The radius value of the circular arc determining corner curvature. Larger values create rounder corners; half the shorter edge creates a perfect circle. This tool supports pixels (0-500px) and percentages (0-50%).
Alpha Channel
Transparency channel in PNG/WEBP with per-pixel opacity values 0-255. After rounding, corner pixels have Alpha=0 (fully transparent), so output backgrounds are truly transparent rather than filled with a color, blending naturally on any background.
Squircle (Superellipse)
A corner shape introduced in iOS 7+ that's smoother than traditional rounded rectangles. Mathematical formula x⁴+y⁴=r⁴. This tool outputs standard circular arcs; use Figma/Sketch for Squircle shapes.
Adaptive Icon
Introduced in Android 8.0+, consisting of foreground and background layers. Recommends 25% corner radius as safe zone; OEM launchers apply their own shape masks.
Canvas arcTo
Canvas 2D API method for drawing arcs. This tool combines arcTo + clip to create rounded rectangle paths, clipping images to the rounded area where corners become Alpha=0 transparent pixels on export.

Platform Corner Radius Quick Reference

Platform / ElementBase SizeRecommended RadiusApprox (px)
iOS / iPadOS App Icon1024 × 1024~22.37%≈ 229 px
Android Adaptive Icon108 × 108~25%≈ 27 px
macOS Sonoma App Icon1024 × 1024Squircle superellipseNo fixed px
Windows 11 Cards—~8 px8 px
Material Design 3 Large—~28 px28 px
Discord / Slack Avatars640 × 64050% (perfect circle)320 px
Twitter / Instagram Avatars400 × 40050% (perfect circle)200 px
E-commerce Product Images800 × 800Recommend 16~24 px16-24 px

Authoritative References