<superellipse> | CSS Types & Functions

A new experimental function for 'corner-shaping' that creates 'squircle' corners. This is the math-based rounding used by Apple in iOS icons to make corners look smoother and more organic than a standard circle.

Quick example

.ios-style-icon {
  border-radius: 40px;
  /* Applies the smooth 'squircle' math to the corners instead of a perfect circle arc */
  corner-shaping: superellipse;
}

<superellipse> Browser Support

Limited availability 67% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

139+