Drawing a superellipse with pure CSS

Question

As the title says: How do you draw a superellipse (specifically, the Apple iOS7 / 8 one) with pure CSS? Not quite sure if it's possible, but still.

Reference image:

Answer 1

This isn't exact, but you may be able to tweak the idea to get something acceptable to you. Basically, you layer ::before and ::after pseudo elements with elliptical borders under the containing element with circular borders to get the effect.

I set the background color of the pseudo elements to blue and green for visualization, but they would be set to the color of the containing element.

Hover the element in the snippet to see combined sections.

div {
    width:180px;
    height:180px;
    border-radius:20%/20%;
    background-color:lightblue;
    position:relative;
}

div::before, div::after {
    content:'';
    position:absolute;
    z-index:-1;
}

div::before {
    border-radius: 2%/30%;
    background-color: blue;
    top: 30px;
    bottom: 30px;
    right: -2px;
    left: -2px;
}

div::after {
    border-radius: 30%/2%;
    background-color: green;
    left: 30px;
    right: 30px;
    top: -2px;
    bottom: -2px;
}

div:hover,
div:hover::before,
div:hover::after {
    background-color:#ff4949
}

<div></div>

Answer 2

We can use an SVG as mask to create a superellipse. I think the best solution for now.

.superellipse {
  height: 200px;
  width: 200px;
  
  --mask: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M199.178 99.589C199.178 165.982 165.982 199.179 99.5893 199.179C33.1963 199.179 0 165.982 0 99.589C0 33.1964 33.1963 0 99.5893 0C165.982 0 199.178 33.1964 199.178 99.589Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(to bottom right, orange, orangered);
  
  /* to center the text */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

<div class="superellipse">🍒</div>

The svg that I use:

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M199.178 99.589C199.178 165.982 165.982 199.179 99.5893 199.179C33.1963 199.179 0 165.982 0 99.589C0 33.1964 33.1963 0 99.5893 0C165.982 0 199.178 33.1964 199.178 99.589Z" fill="black"/>
</svg>

I encoded it with url-encoder

What about CSS Houdini?

Now we can use CSS Paint API that provided by CSS Houdini. We'll use a library called smooth-corners, that registers a new paint which is drawing a superellipse.

But only Chrome and Edge are supported for now.

if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')

.superellipse {
  display: inline-block;
  margin: 20px;
  height: 150px;
  width: 150px;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: linear-gradient(to bottom right, deeppink, orangered);
}

<div class="superellipse" style="--smooth-corners: 0.6"></div>
<div class="superellipse" style="--smooth-corners: 1.5"></div>
<div class="superellipse" style="--smooth-corners: 2.2"></div>
<div class="superellipse" style="--smooth-corners: 2.6"></div>
<div class="superellipse" style="--smooth-corners: 3"></div>
<div class="superellipse" style="--smooth-corners: 4"></div>