squircle
border-radius: 50pxcorner-shape: squircle

Controls

50px
superellipse(2)

Presets

CSS Code

.element {
    border-radius: 50px;
    corner-shape: squircle;
}

corner-shape is a CSS property that lets you customize the curvature of rounded corners beyond standard circles.

The superellipse(n) function accepts values from -infinity to infinity.

  • Positive values → convex curves (bulging outward)
  • Negative values → concave curves (scooped inward)
  • 0 → straight bevel (flat corner)