CSS Superellipse

The CSS Radius property is useful to craft round corners. Achieving a superellipse is a bit more complex. We can reach this goal by using a bit of custoim code with pseudo-elements ::before and ::after.

«A superellipse, also known as a Lamé curve after Gabriel Lamé, is a closed curve resembling the ellipse, retaining the geometric features of semi-major axis and semi-minor axis, and symmetry about them, but a different overall shape. Wikipedia

Superellipses a very popular right now due to Apple using them intensively for their hardware design as well as their apps and OS design. The most familiar representation is the iOS app icon shape.

The demo

A div with 20% radius
A superellipsed div!
Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

.superellipse {
    width: 220px;
    height: 220px;
    position:relative;
    border-radius:20%;
}

.superellipse::before, .superellipse::after {
   content:'';
   position:absolute;
   z-index:-1;
}
‍
.superellipse::before {
   border-radius: 2%/30%;
   background-color: white;
   top: 33px;
   bottom: 33px;
   right: -2px;
   left: -2px;
}

.superellipse::after {
   border-radius: 30%/2%;
   background-color: white;
   left: 33px;
   right: 33px;
   top: -2px;
   bottom: -2px;
}