superellipse()

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Thesuperellipse()CSS function defines the curvature of an ellipse, and is used to specifycorner shapes either directly, or via<corner-shape-value> keywords.

Syntax

css

superellipse(infinity)superellipse(4)superellipse(1.7)superellipse(0)superellipse(-2.8)superellipse(-3)superellipse(-infinity)

Parameters

<number>: A number in the range of-infinity toinfinity, inclusive.

Thesuperellipse() function returns a superellipse shape, which is used to specifycorner-shape values. A superellipse is a closed curve symmetric shape between a rectangle and an ellipse. It resembles an ellipse that retains the geometric features of its two axes.

The superellipse shape is calculated using a modified version of an ellipse. The following equation defines an ellipse centered at the origin:

\frac{x^{2}}{a^{2}} + \frac{y^{2}}{b^{2}} = 1

Thea andb variables refer to the radii of the ellipse, while thex andy coordinates are points on the ellipse's circumference.

A circle is an ellipse where the radii, thea andb in the previous equation, are the same length. Witha andb both equal tor, the equation for a circle can be written as:

x^{2} + y^{2} = r^{2}

In this equation, thex andy are coordinates of points on the circle's circumference, and ther is the radius of the circle, with the center of the circle being(0, 0). The ellipse is produced by scaling a circle shape along thex and/ory axis.

A superellipse shape is created by replacing the2 exponent in each case with 2^K,K being the argument passed to thesuperellipse() function, which modifies the curvature of the ellipse:

x^{2^{K}} + y^{2^{K}} = 1

The following diagram illustrates differentsuperellipse() values for the top right corner of a container:infinity,1,0,-1, and-infinity:

Line diagram illustrating the ellipses created using different K values, as described subsequently

AK value of0 creates a straight line. This value can be used to create bevelled corners and corresponds to the<corner-shape-value>bevel keyword.
AK value of1 creates an ordinary ellipse, corresponding to theround keyword.
AK value of>1 makes the ellipse shape more square;2 corresponds to thesquircle keyword.
AK value ofinfinity creates a perfect square (corresponding to thesquare keyword), althoughK values of10 or more are virtually indistinguishable from a square.
NegativeK values result in a concave curve, resulting in corner shapes that are curved inward, or "scooped out". AK value of-1 corresponds to thescoop keyword and-infinity corresponds to thenotch keyword.

A negative or positive superellipse would appear symmetrical to a superellipse with its inverse value.

Note:For anyK parameter value passed, thesuperellipse() function's return value will always be the same for thatK value. When that value is applied to two elements, the appearance of the corner shape may differ if the box size orborder-radius values differ.

Formal syntax

<superellipse()> =
superellipse(<number [-∞,∞]>|
infinity|
-infinity)

Examples

`superellipse()` value comparison

In this example, two<input type="range"> sliders allow you to cycle through many differentcorner-shapesuperellipse() values andborder-radius values enabling you to compare the effects of each on a container. The code is hidden for brevity, but the full explanation of thesuperellipse value comparison is provided on thecorner-shape reference page.

<form>  <div>    <label for="superellipse-slider">Choose a superellipse() value:</label>    <input      type="range"           min="-5"      value="0"      max="5"      step="0.1" />  </div>  <div>    <label for="radius-slider">Choose a border-radius value:</label>    <input type="range" min="0" value="45" max="90" />  </div></form><section></section>

html {  font-family: Arial, Helvetica, sans-serif;}body {  width: fit-content;  margin: 20px auto;}section {  display: flex;  justify-content: center;  align-items: center;  flex: 100%;  margin-top: 20px;}form div {  margin-top: 5px;  display: flex;}section {  width: 100%;  height: 180px;  background-color: orange;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}section {  box-shadow: 1px 1px 3px gray;}

const rectangle = document.querySelector("section");const superEllipseRange = document.getElementById("superellipse-slider");const borderRadiusRange = document.getElementById("radius-slider");function setCorners() {  const seValue = `superellipse(${superEllipseRange.value})`;  rectangle.style.cornerShape = seValue;  const brValue = `${borderRadiusRange.value}px`;  rectangle.style.borderRadius = brValue;  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;}superEllipseRange.addEventListener("input", setCorners);borderRadiusRange.addEventListener("input", setCorners);setCorners();

Note:See also the<corner-shape-value> value comparison example.