CSS superellipse() Function

CSS superellipse() Function

The CSS superellipse() function defines the curvature of an element's corners using a numeric value.

It is used with the corner-shape property to create rounded, squared, beveled, and inward-curving corners. The border-radius property determines the area occupied by each corner, while superellipse() controls its shape.

Syntax

superellipse(number)
superellipse(infinity)
superellipse(-infinity)

The superellipse() function accepts one numeric argument that controls the curvature of a corner.

Examples:

corner-shape: superellipse(0);
corner-shape: superellipse(1);
corner-shape: superellipse(2);
corner-shape: superellipse(4);
corner-shape: superellipse(-1);
corner-shape: superellipse(-2);
corner-shape: superellipse(infinity);
corner-shape: superellipse(-infinity);

Positive values produce outward-curving corners, negative values produce inward-curving corners, and zero produces a straight diagonal corner.

The function can also be used with individual corner-shape properties:

corner-top-left-shape: superellipse(2);
corner-top-right-shape: superellipse(-1);

The function does not specify the size of the corner. Use border-radius to establish the corner area.

Parameters

The superellipse() function requires exactly one argument.

Whole numbers and decimal values are accepted:

superellipse(1)
superellipse(1.5)
superellipse(2.5)
superellipse(-0.5)
superellipse(-2.5)

The special keywords infinity and -infinity represent the square and notch extremes.

CSS mathematical expressions can also provide the argument:

corner-shape: superellipse(calc(1 + 1));
corner-shape: superellipse(var(--corner-curve, 2));

The argument must resolve to a number. Lengths such as 2px and percentages such as 50% are not valid arguments.

Return Values

The superellipse() function returns a superellipse corner-shape value rather than a number, length, or color.

The resulting shape depends on the numeric argument.

The same numeric value can produce different-looking results when used with different corner radii or element dimensions.

How It Works

Ordinary rounded corners are based on elliptical curves. The superellipse() function modifies that curvature to create a wider range of shapes.

The function uses a mathematical exponent derived from its argument. Increasing the positive value makes the curve progressively more square-like.

For example:

.box {
  border-radius: 40px;
  corner-shape: superellipse(1);
}

This produces an ordinary rounded corner, equivalent to the round keyword.

Increasing the value:

.box {
  border-radius: 40px;
  corner-shape: superellipse(2);
}

This produces a squircle-like corner, with a curve that stays closer to the outside edges before turning.

Using a negative value:

.box {
  border-radius: 40px;
  corner-shape: superellipse(-1);
}

This creates an inward-curving, scooped corner.

The corner-shape property controls the curvature, while border-radius determines the horizontal and vertical dimensions of the corner area.

Shape Values

Different numeric values create different corner shapes.

Positive Values

Positive values create convex corners that curve outward.

corner-shape: superellipse(0.5);
corner-shape: superellipse(1);
corner-shape: superellipse(2);
corner-shape: superellipse(4);

Values between zero and one create curves between a bevel and an ordinary rounded corner.

Values greater than one produce progressively squarer curves.

Zero

corner-shape: superellipse(0);

Zero creates a straight diagonal edge across the corner area, equivalent to bevel.

Negative Values

corner-shape: superellipse(-0.5);
corner-shape: superellipse(-1);
corner-shape: superellipse(-2);

Negative values create concave corners that curve inward.

As the magnitude increases, the shape approaches a rectangular notch.

Infinity Values

corner-shape: superellipse(infinity);
corner-shape: superellipse(-infinity);

Positive infinity produces a square corner, while negative infinity produces a square inward notch.

Keyword Equivalents

The corner-shape property provides six predefined keywords corresponding to particular superellipse() values.

For example, these declarations are equivalent:

corner-shape: squircle;
corner-shape: superellipse(2);

These are also equivalent:

corner-shape: scoop;
corner-shape: superellipse(-1);

Use the predefined keywords for common shapes and superellipse() when a custom curvature is required.

Using border-radius

The superellipse() function works with the corner area established by border-radius.

For example:

.box {
  border-radius: 30px;
  corner-shape: superellipse(2);
}

The radius determines the size of the corner area, while the function determines its curvature.

Increasing the radius:

.box {
  border-radius: 60px;
  corner-shape: superellipse(2);
}

This creates larger curved corners while preserving the same superellipse shape value.

If the radius is zero, the corner-shape value has no visible effect:

.box {
  border-radius: 0;
  corner-shape: superellipse(2);
}

Different horizontal and vertical radii can also be used:

.box {
  border-radius: 50px / 25px;
  corner-shape: superellipse(1.5);
}

This creates corners whose horizontal and vertical dimensions differ.

For browsers without corner-shape support, the border-radius value provides an ordinary rounded-corner fallback.

Individual Corner Shapes

The corner-shape shorthand accepts one to four values, allowing different shapes for different corners.

One Value

.box {
  border-radius: 35px;
  corner-shape: superellipse(2);
}

All four corners use the same shape.

Two Values

.box {
  border-radius: 35px;
  corner-shape: superellipse(2) superellipse(-1);
}

The first value applies to the top-left and bottom-right corners. The second applies to the top-right and bottom-left corners.

Three Values

.box {
  border-radius: 35px;
  corner-shape: superellipse(2) superellipse(1) superellipse(-1);
}

The first value applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner.

Four Values

.box {
  border-radius: 35px;
  corner-shape: superellipse(2) superellipse(1) superellipse(-1) superellipse(0);
}

The values apply clockwise: top-left, top-right, bottom-right, and bottom-left.

Individual Properties

Individual corners can also be controlled with their corresponding properties:

.box {
  border-radius: 35px;
  corner-top-left-shape: superellipse(2);
  corner-top-right-shape: superellipse(1);
  corner-bottom-right-shape: superellipse(-1);
  corner-bottom-left-shape: superellipse(0);
}

This allows each corner to use a different curvature without affecting the others.

Example

The following example compares six different superellipse() values.

HTML:

<div class="superellipse-demo">
  <div class="superellipse-item" style="--curve: 0;">0 - Bevel</div>
  <div class="superellipse-item" style="--curve: 1;">1 - Round</div>
  <div class="superellipse-item" style="--curve: 2;">2 - Squircle</div>
  <div class="superellipse-item" style="--curve: 4;">4 - Squarer</div>
  <div class="superellipse-item" style="--curve: -1;">-1 - Scoop</div>
  <div class="superellipse-item" style="--curve: -2;">-2 - Inward</div>
</div>

CSS:

.superellipse-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
.superellipse-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  background-color: #3498db;
  border-radius: 35px;
  text-align: center;
}
@supports (corner-shape: superellipse(2)) {
  .superellipse-item {
    corner-shape: superellipse(var(--curve));
  }
}

Each box has the same dimensions and border radius, but a different superellipse value.

In supporting browsers, the corners range from beveled and rounded to square-like and inward-curving shapes.

In browsers without support, all six boxes display ordinary rounded corners.

Mixed Corner Example

The following example applies different superellipse values to individual corners of a card.

HTML:

<div class="superellipse-card">
  <h3>Custom Corner Shapes</h3>
  <p>Each corner uses a different curvature.</p>
</div>

CSS:

.superellipse-card {
  max-width: 340px;
  margin: 20px auto;
  padding: 30px;
  color: #fff;
  background-color: #2e86c1;
  border-radius: 45px;
}
.superellipse-card h3 {
  margin-top: 0;
  color: inherit;
}
.superellipse-card p {
  margin-bottom: 0;
}
@supports (corner-shape: superellipse(2)) {
  .superellipse-card {
    corner-shape: superellipse(2) superellipse(-1) superellipse(0) superellipse(4);
  }
}

The top-left corner uses a squircle shape, the top-right is scooped, the bottom-right is beveled, and the bottom-left uses a more square-like curve.

All four corners share the same radius but use different shapes.

Transition Example

The corner-shape property can animate between different superellipse() values in browsers that support interpolation.

HTML:

<button class="superellipse-button" type="button">
  Hover or Focus
</button>

CSS:

.superellipse-button {
  padding: 18px 30px;
  border: none;
  border-radius: 25px;
  color: #fff;
  background-color: #16a085;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
@supports (corner-shape: superellipse(2)) {
  .superellipse-button {
    corner-shape: superellipse(1);
    transition: corner-shape 0.4s ease, background-color 0.3s ease;
  }
  .superellipse-button:hover,
  .superellipse-button:focus-visible {
    corner-shape: superellipse(4);
  }
}
.superellipse-button:hover,
.superellipse-button:focus-visible {
  background-color: #117864;
}
.superellipse-button:focus-visible {
  outline: 3px solid #f39c12;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .superellipse-button {
    transition: none;
  }
}

In supporting browsers, the button changes from ordinary rounded corners to a more square-like shape when hovered or focused.

Browsers without support retain rounded corners while still changing the background color.

The reduced-motion media query disables the transition for users who prefer less motion.

Common Uses

The superellipse() function provides more control over corner curvature than ordinary rounded corners.

• Buttons: Create squircle-shaped or custom-curved button corners.
• Cards: Give content cards distinctive corner shapes.
• Decorative panels: Create beveled, scooped, or notched corners.
• Interface components: Apply consistent custom curvature across a design.
• Mixed corners: Use different shapes for individual corners.
• Transitions: Animate between supported corner-shape values.
• Custom properties: Reuse numeric curvature values throughout a stylesheet.

For example:

.card {
  --corner-curve: 2.5;
  border-radius: 30px;
  corner-shape: superellipse(var(--corner-curve));
}

The custom property controls the corner curvature while border-radius controls the corner dimensions.

Limitations

The superellipse() function has several requirements and compatibility considerations.

• It requires exactly one numeric argument.
• The argument must be unitless, although positive and negative infinity are supported.
• It defines corner curvature rather than corner size.
• A nonzero border-radius is needed for the shape to have a visible effect.
• Positive values create convex corners, while negative values create concave corners.
• Zero produces a beveled corner.
• It is not a general-purpose function for the clip-path or transform properties.
• It has limited browser availability and is not yet a Baseline feature.
• Unsupported browsers ignore the corner-shape declaration and can use ordinary rounded corners as a fallback.
• The final appearance depends on the element dimensions and corner radii.

Valid and Invalid Values

These declarations are valid:

corner-shape: superellipse(1);
corner-shape: superellipse(2.5);
corner-shape: superellipse(-1);
corner-shape: superellipse(infinity);

The following declaration is invalid because the argument is a length:

corner-shape: superellipse(20px);

The following is invalid because the function accepts only one argument:

corner-shape: superellipse(1, 2);

Browser Fallback

Use border-radius to provide rounded corners in browsers without superellipse() support.

.box {
  border-radius: 30px;
}
@supports (corner-shape: superellipse(2)) {
  .box {
    corner-shape: superellipse(2);
  }
}

Supporting browsers display the custom curvature. Other browsers retain ordinary rounded corners.

This progressive enhancement approach is useful while browser support remains limited.

Browser Support

The CSS superellipse() function has Limited availability and is not part of Baseline because it is not supported across all major browser engines.

It is an experimental CSS feature associated with the corner-shape property. Browser support and implementation details may change as the specification develops.

Use a border-radius fallback and test the feature in the browsers your website supports.

For current compatibility information, visit Can I Use? and search for corner-shape.

Specifications

The superellipse() function is defined in the CSS Borders and Box Decorations Module Level 4 specification.

The specification defines the function's numeric argument and its use in determining corner curvature.

Related CSS features include the corner-shape property, individual corner-shape properties, and border-radius.