Squircle Corner Shape

Exploring the CSS corner-shape property with squircle curves - a smoother, more organic alternative to standard border-radius

1. Squircle vs Standard Radius

Squircle Corner Shape

Organic, continuous curve

Standard Border Radius

Circular arc approximation

Side-by-Side Visual Comparison

Squircle

Standard

2. Squircle at Different Dimensions

Square Dimensions (Balanced)

Small (60px)

radius: 12px

Medium (100px)

radius: 20px

Large (160px)

radius: 32px

XL (240px)

radius: 48px

Wide Rectangles (Horizontal Pills)

Wide Button (300×60)

radius: 16px

Wide Card (400×80)

radius: 24px

Wide Banner (500×100)

radius: 32px

Tall Rectangles (Vertical Cards)

Mobile Card

120×200, r=24px

Profile Card

160×280, r=32px

Story Card

200×360, r=40px

Extreme Aspect Ratios

Ultra-wide Bar (600×50)

Ultra-tall (80×300)

3. Implementation, Compatibility & Issues

💻 Implementation

.squircle-button {
  border-radius: calc(36px * 0.7); /* 25.2px */
  corner-shape: squircle;
}
  • corner-shape: squircle creates a superellipse curve (Lamé curve with n≈5)
  • The border-radius value controls the corner size
  • Squircle corners are mathematically defined to be smoother than circular arcs
  • Popular in modern design systems (iOS icons, macOS UI, etc.)

🌐 Browser Compatibility

✅

Microsoft Edge 151+ (Chromium)

Experimental support behind flag

⚠️

Chrome/Chromium (Not yet)

In experimental phase, may arrive in future versions

❌

Firefox, Safari (No support)

Falls back to standard border-radius

⚡ Issues & Considerations

  • ▸
    Very Limited Browser Support: Only works in Edge 151+ with experimental flags enabled. Not production-ready for most websites.
  • ▸
    Progressive Enhancement Required: Must always include border-radius as fallback. Unsupported browsers will show standard rounded corners.
  • ▸
    No Standard Yet: The property is experimental and may change before standardization.
  • ▸
    Performance Unknown: Rendering performance impact not well documented yet.
  • ▸
    Alternatives: For production, consider SVG masks, CSS clip-path, or canvas-based solutions to achieve similar effects cross-browser.

🔮 Future Outlook

The corner-shape property is part of the CSS Shapes Level 2 proposal. If adopted widely, it could provide native support for design trends popularized by Apple's design language. However, current adoption is minimal, and it may take years before it's safe to use in production without fallbacks.

For now, treat this as a progressive enhancement feature - provide the property for supporting browsers, but ensure your design works perfectly with standard border-radius.

Demo inspired by Microsoft Edge 151 Update