Squircles in CSS: Using corner-shape

For a long time, web design has relied on the classic border-radius property to create rounded corners. While useful, a standard rounded corner is geometrically a simple circular arc that intersects abruptly with straight lines, creating a harsh transition.

Enter the squircle (or superellipse). Squircles feature a continuous, mathematically smooth transition between the straight edges and the corner curve, which is why companies like Apple use them for app icons, hardware designs, and user interfaces.

With the new CSS corner-shape property, you can finally define corner shapes on the web.

Geometrical Differences

A standard rounded corner uses a circular arc. A squircle uses a superellipse curve ($x^n + y^n = 1$ where $n > 2$).

In CSS, the <corner-shape-value> data type describes how a container corner should be drawn:

round: The default circular curve.
squircle: A smooth superellipse transition.
bevel: A flat, diagonal cut.

CSS Implementation

The corner-shape property is a shorthand that controls the shape of the container corners. It is used in combination with border-radius to define the radius size.

.card-squircle {
  border-radius: 2rem;
  corner-shape: squircle;
  /* Shorthand or specific corner: */
  /* border-top-left-radius-shape: squircle; */
}

By defining corner-shape: squircle, the browser applies a superellipse transition instead of a circular arc.

Creating Beveled Corners

You can also use corner-shape to easily create beveled (cut) corners:

.card-bevel {
  border-radius: 1.5rem;
  corner-shape: bevel;
}

This is much easier than writing complex CSS clip-path or using linear-gradient background hacks to create diagonal cut corners!

Browser Support and Fallbacks

The corner-shape property is part of the CSS Backgrounds and Borders Module Level 4 and is currently experimental.

Because it degrades gracefully, browsers that do not support corner-shape will simply fall back to the standard circular border-radius rounded corners:

.card {
  border-radius: 2rem; /* Supported everywhere */
  corner-shape: squircle; /* Smooth in supporting browsers, fallback to round otherwise */
}

I hope you liked this tutorial on creating custom corner shapes in CSS!

Source

You can find out more about <corner-shape-value> here.