Corner Smoothing

Corner smoothing creates organic, continuous curves at corners instead of standard circular arcs. This technique, often called "squircle" or "superellipse," is famously used by Apple for iOS app icons and UI elements.

What is Corner Smoothing?

Standard rounded corners use circular arcs that meet the straight edges at a tangent point. Corner smoothing extends the curve further along the edge, creating a more organic transition that appears smoother to the eye.

Enabling Corner Smoothing

1. Select a rectangle or frame with corner radius
2. In the Properties panel, find the Corner Radius section
3. Click the smoothing icon or expand corner options
4. Adjust the smoothing slider (0% to 100%)

Smoothing Values

• 0% - Standard circular arc (no smoothing)
• 60% - iOS-style smoothing (Apple's default)
• 100% - Maximum smoothing (most organic)

Independent Corners

You can set different radius and smoothing for each corner:

1. Click the "Independent corners" icon
2. Set individual values for:
   • Top Left
   • Top Right
   • Bottom Right
   • Bottom Left
3. Each corner can have its own radius and smoothing

Visual Comparison

Standard Radius	With Smoothing
Circular arc	Continuous curve
Abrupt transition	Gradual transition
Mathematical precision	Organic feel
Web default	Native app feel

When to Use Corner Smoothing

• iOS App Icons - Required for App Store icons
• Native Mobile UI - Matches platform aesthetics
• Cards & Containers - More refined appearance
• Buttons - Softer, more approachable look
• Profile Pictures - Organic framing

CSS Export

When exporting to CSS, corner smoothing affects the output:

• Standard radius exports as border-radius
• Smoothed corners export as SVG clip-path
• Or use CSS mask-image with generated shape

SVG Export

Smoothed corners export as bezier curves in SVG:

• The path includes curved segments for corners
• File size slightly larger than standard rectangles
• Maintains visual fidelity at all sizes

Tips

• 60% smoothing closely matches iOS icon shape
• Higher radius values show smoothing effect more clearly
• Smoothing works best on larger shapes (40px+ radius)
• Combine with shadows for premium card designs
• Use consistently across your design system

Keyboard Shortcuts

• Select shape, then use Properties panel
• Hold Alt while adjusting radius to copy to all corners