CSS superellipse() controls a corner’s curvature through the experimental corner-shape property. Use it with a nonzero border-radius to create shapes ranging from a bevel or standard rounded corner to a squircle or concave scoop. Browser support is still uneven, so include a fallback for production.
What is CSS superellipse()?
superellipse() is a function value for the experimental CSS corner-shape property. It describes the curvature of a box corner; it is not itself a radius or a length. Its formal syntax is superellipse(<number> | infinity | -infinity), and its numeric argument can range from negative to positive infinity. MDN’s reference describes the function and its use.
The name comes from the superellipse, a family of curves represented generally as |x/a|r + |y/b|r = 1. With equal axes, these curves are also called Lamé curves or Lamé ovals; the r = 4 case is commonly called a squircle. The family was discussed by Gabriel Lamé in 1818. MathWorld’s superellipse reference explains the mathematical form.
What does the number in superellipse(K) mean?
The CSS model uses the equation x2K + y2K = 1. The value K changes the curve: zero produces a straight bevel, one produces an ordinary rounded ellipse, and values above one make the curve progressively squarer. Negative values create concave shapes. The CSS specification defines the function and its named equivalents. CSS Backgrounds and Borders Module Level 4
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Value | Shape | Appearance |
|---|---|---|
superellipse(0) |
Bevel | Straight, cut-off corner |
superellipse(1) |
Round | Ordinary convex rounded corner |
superellipse(2) |
Squircle | Convex corner with a squarer profile |
superellipse(infinity) |
Square | Square corner |
superellipse(-1) |
Scoop | Concave inward curve |
superellipse(-infinity) |
Notch | Inward, notched corner |
These are also available as named corner-shape values: bevel, round, squircle, square, scoop, and notch. Use a keyword when one of those fixed shapes is what you want; use superellipse(K) when you need to tune curvature with intermediate values.
How do you use superellipse() in CSS?
Set a nonzero border-radius to establish the corner area, then choose a corner-shape value. For example:
.card {
border-radius: 2rem;
corner-shape: superellipse(2);
}Here, the radius determines the size of the corner area and superellipse(2) shapes the curve within it. Without a nonzero radius, the corner area is zero, so the shape has no visible effect. The same K value can therefore look different when the element’s dimensions or radius change.
Shaped corners also affect how the browser renders borders, clips overflowing content, and calculates box shadows—not just the visible fill at the corner. Check the result with the actual border, clipping, and shadow styles used by your component. The specification’s corner-shaping section describes these effects.
How does it differ from border-radius?
border-radius sets the dimensions of rounded corner areas; corner-shape determines the shape drawn within them. They work together rather than serving as interchangeable alternatives. Use ordinary border-radius alone when a conventional rounded corner is sufficient and broader browser compatibility matters. Add corner-shape when you need a bevel, squircle, scoop, notch, or more control over curvature.
Named shapes provide convenient fixed choices, while the numeric function allows a continuous range of curvature values. The specification defines how corner shapes are used and interpolated, but actual animation behavior should be verified in the browsers your site supports; the feature’s uneven implementation makes it unwise to assume identical results everywhere.
Rank #4
Does superellipse() work in all browsers?
No. MDN labels the feature experimental and not Baseline because it is not implemented across all widely used browsers. The compatibility information in MDN’s reference lists support in Chrome 139 and Edge 139, and no Firefox support. Browser support can change, so check the current compatibility status before relying on it. MDN: superellipse()
Provide a graceful fallback by declaring the conventional radius first, then adding the enhanced shape:
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
.card {
border-radius: 2rem;
corner-shape: superellipse(2);
}In browsers that do not understand corner-shape, the ordinary radius remains as the fallback. If you prefer a named shape, use a supported corner-shape keyword instead, but confirm its support too. Test both the fallback and enhanced appearance in your target browsers.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
