Understanding CSS corner-shape and the Power of the Superellipse

The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border-radius, this seemingly small addition unlocks a world of new possibilities that previously required complex SVG implementations or image-based solutions.

As of this writing (June 2025), corner-shape is a very new feature with limited browser support, currently only available in Chrome (version M139 and above). The specification may still undergo changes. Try Chrome Canary right now to view these demos.

Before we dive into the advanced capabilities of this property, let’s first understand the foundation it builds upon: the familiar border-radius property that has shaped our corners for over a decade.

The Foundation

The border-radius property gave us the ability to easily create rounded corners on elements. At the max value, using absolute values (like pixels) creates pill shapes, while percentage values create consistent rounded corners. However, any non-zero radius would always create an elliptical curve.

While it is a powerful and useful tool, sometimes we need something… different. This is where the new corner-shape property comes in, expanding our geometric vocabulary beyond just rounded corners.

Introducing corner-shape

The corner-shape property works as a companion to border-radius, where border-radius determines the ‘size’ of the curve, and corner-shape defines how that curve looks.

CSS provides several predefined keywords for corner shapes:

• round (default): Creates the traditional circular or elliptical corners
• squircle: A smooth blend between a square and circle
• scoop: Concave quarters of an ellipse
• bevel: Straight lines connecting the corner points
• notch: Creating an inward corner
• square: Maintains right angles regardless of border-radius (why is this a thing?!)

These keywords enable us to create diverse and visually interesting borders, without resorting to complex implementations, and allow us to easily produce simple geometric shapes like rhombuses, octagons, or plus signs (+).

.rhombus {
  aspect-ratio: 2 / 3;
  border-radius: 50%;
  corner-shape: bevel;
}

.octagon {
  aspect-ratio: 1;
  border-radius: calc(100% / (2 + sqrt(2))); /* ~29% */
  corner-shape: bevel;
}

.plus {
  aspect-ratio: 1;
  border-radius: calc(100% / 3);
  corner-shape: notch;
}

.plus-alt {
  /* rotate to get a X sign */
  rotate: 45deg;
}Code language: CSS (css)

.rhombus { 
  corners: 50% bevel;
}Code language: CSS (css)

We can create even more shapes with squircle and scoop, but we’ll explore those in depth when we discuss Superellipses. For now, let’s talk about using multiple values…

Working with Multiple Values

So far, we’ve used a single value for border-radius, but we can get much more creative. As you may know, border-radius can accept up to eight different values (horizontal and vertical radii for each of the four corners).

This becomes particularly interesting when combined with corner-shape. The interaction between different radius values and corner shapes creates a rich playground for design experimentation.

By using multiple values, we can create additional designs and shapes, like my all time favorite shape – hexagons. Now we can generate perfect hexagons with just a few simple lines of CSS. Using a bevel shape for the corners, and giving different values to the horizontal and vertical radii (50% and 25%).

.hexagon {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
}

.hexagon-alt {
  aspect-ratio: 1 / cos(30deg);
  border-radius: 25% / 50%;
}Code language: CSS (css)

But border-radius is not the only one that can accept multiple values, corner-shape is a shorthand too, and can take up to 4 values, one for each corner. In this way, we can create even more unique shapes.

.shapeA {
  aspect-ratio: 1 / 2;
  border-radius: 40% / 50%;
  corner-shape: bevel squircle squircle bevel;
}
.shapeB {
  aspect-ratio: 1;
  border-radius: 10% 50% 50%;
  corner-shape: round scoop bevel;
  rotate: 45deg;
}
.shapeC {
  aspect-ratio: 1;
  border-radius: 10% 10% 50% 50%;
  corner-shape: round round scoop scoop ;
}Code language: CSS (css)

One of these shapes made me think of speech bubbles. We always needed a little help from pseudo-elements (and some hacking) to create an ‘arrow’ at the bottom of the element. Now, we can do it with a simple border-radius.

We can also declare just one specific corner, which can be particularly useful when we want to style just one corner differently, for example, to create space for a counter or a button at the corner of an element.

.container {
  border-radius: 40px;
  corner-top-right-shape: scoop;
}Code language: CSS (css)

Animation and Transition of corner-shape

If you clicked the red button in the previous example (good!), you might have noticed that the closing and opening of the element occurs through a transition of the corner-shape. I take advantage of the fact that a notch with a radius of 50% essentially clip the element completely.

Just like the border-radius, you can also animate the corner-shape property or smoothly transition from one shape to another.

The square value, which might seem useless at first glance, is actually very useful in animations and transitions when we want to animate the border to a square shape.

The Power of Superellipse

So far, we’ve explored the predefined keywords of corner-shape, which are great, but there’s an even more powerful option we haven’t discussed yet: the Superellipse! This is arguably more impressive than all the previous options combined, as those keywords are essentially just specific points along the superellipse spectrum. So let’s understand what are superellipses, what is the superellipse function, and how we can use it to fine-tune our borders.

As a mathematical concept, the superellipse has existed for about a hundred years, and I love it because someone took something that had existed for centuries (the ellipse formula) and said, “let’s do this differently”. Gabriel Lamé took the formula for an ellipse and asked, what happens if we replace the with something else?! The result: hundred years goes by, his formula is embedded in browsers, making thousands of web developers happier.

Math dudes will comment the actual formula for an ellipse is but since the and are the axis set by the element’s width and height, we can set and get the simplified formula

When we replace the with a variable (), this variable would now represent the “squareness” of the shape. If represents a regular circle, then with values greater than , the curve approaches a rectangle, and with values less than , the line starts to straighten. When , it means , which is exactly the same as , which is actually the formula of a straight line, resulting in a diamond shape. And any number between zero and one gives us a concave shape.

The CSS Superellipse function

But if all this sounds a bit complicated, don’t worry, the CSS folks took care of us, making this function much simpler and way more intuitive. Unlike Lamé’s formula, the CSS superellipse() function takes an argument (let’s call it ) that can be any value, positive or negative. And the way the function works is like this:

• Zero is the ‘mid-point’, so if we pass 0 to the function, i.e. superellipse(0), we get a straight line, just like the bevel we saw earlier.
• Any positive number will give us an outward-curved arc, where superellipse(1) is the regular circle, superellipse(2) is our squircle, and as the number increases, the shape will look more like a square, with infinity giving us the square shape.
• And the same happens with negative numbers. superellipse(-1) gives us a star-like shape, which is the scoop we saw earlier, and the lower the number, the more deeply concave the corner becomes.

Simple, right? But how?!

The CSS function superellipse(k) uses the exponent to map the value to . So , and the complete formula looks like this:

​

This calculation format is much more logical and makes the feature more intuitive.

When it means that or , hence the straight line. If then , which is the regular round curve. And if we get , resulting in more ‘squircle’ shape. On the other side, when we give the function a negative number, , will always be a number between zero and one, resulting in a concave curve towards the center of the element.

Different Exponents

One limitation of the current superellipse() function is that we can’t pass two variables to it, like superellipse(k, l), to use different exponents for the and axes. That would give us the formula .

If this were possible, we could create some really interesting shapes like this:

Beyond Two Dimensions

While it’s completely outside the scope of this article, if you’ve made it this far, you might be interested to know that the superellipse concept extends to higher dimensions as well. There’s the Superellipsoid that exists in three dimensions, and you can represent a hyperellipsoid in dimensions using the following formula:

​

Wrapping up

This article walked us through the evolution from a simple rounded edges to a full geometric vocabulary with the new CSS corner‑shape property. We explored the predefined shapes, and discover how they map directly to points on the superellipse spectrum, and dive into the true power of the superellipse function. We saw how we can mix multiple values to craft wild shapes, how to animate and transition the corners, and how to exploit even the weird edge case to our advantage.

Now it’s your turn: bring these ideas into your own work. Open a new Pen, add a corner‑shape to a simple box or button, and watch how a tiny tweak changes the whole feel of your design. Don’t forget to share your experiments with the community, inspire others with unexpected curves and help drive this bold new CSS feature into everyday use.

I’d like to give special thanks to Noam Rosenthal for reviewing the code and examples, helping refine the ideas, and of course, for authoring the spec for corner-shape and implementing it in chromium.