Look at the app icons on your phone. Notice how none of them are perfectly round, yet none are just a rectangle with rounded corners either? That shape has a name - and it's finally coming to CSS.

The squircle (square + circle) is a mathematical shape called a superellipse, described by the equation |x/a|ⁿ + |y/b|ⁿ = 1 where n > 2. Unlike border-radius: 50% which creates a mathematically perfect circle, a squircle has sides that remain flatter for longer before curving - producing a shape that feels more natural and intentional to the human eye.

How to make one in CSS today

As of 2025, CSS is gaining native squircle support via the new corner-shape property proposed in the CSS Basic UI specification. Here's how the future API looks:

Method 1 - Native CSS (Chromium 137+, experimental)

/* Requires Chrome 137+ or Edge 137+ with experimental flags */
.squircle {
  width: 120px;
  height: 120px;
  border-radius: 35%;
  corner-shape: squircle;
  background: #eef0f8;
}

Method 2 - SVG clip-path (works everywhere)

<!-- Define once in your SVG defs -->
<svg width="0" height="0" style="position:absolute">
  <defs>
    <clipPath id="squircle" clipPathUnits="objectBoundingBox">
      <path d="M0.5,0.025 C0.79,0.025,0.975,0.21,0.975,0.5
             C0.975,0.79,0.79,0.975,0.5,0.975
             C0.21,0.975,0.025,0.79,0.025,0.5
             C0.025,0.21,0.21,0.025,0.5,0.025Z"/>
    </clipPath>
  </defs>
</svg>

/* Then apply to any element */
.squircle {
  clip-path: url(#squircle);
}

Method 3 - CSS mask (flexible, gradient-ready)

.squircle {
  /* Works as a mask for images and gradients */
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><path d='M50,5 C78,5,95,22,95,50 C95,78,78,95,50,95 C22,95,5,78,5,50 C5,22,22,5,50,5Z' fill='black'/></svg>");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Browser support & fallbacks

When using native corner-shape, always provide a graceful fallback using @supports. Browsers that don't support the property will render a regular border-radius - which is perfectly acceptable:

The @supports pattern

.icon {
  /* Fallback - works in ALL browsers */
  border-radius: 22%;
}

@supports (corner-shape: squircle) {
  .icon {
    /* Enhanced - only where supported */
    border-radius: 35%;
    corner-shape: squircle;
  }
}

This approach ensures users on older browsers get a tasteful rounded rectangle, while those on supporting browsers enjoy the true squircle.

Full progressive enhancement example

.app-icon {
  width: 64px;
  height: 64px;

  /* Layer 1 - wide support: rounded rect */
  border-radius: 18px;

  /* Layer 2 - clip-path squircle (all modern browsers) */
  clip-path: url(#squircle-clip);
}

@supports (corner-shape: squircle) {
  .app-icon {
    clip-path: none; /* remove SVG fallback */
    border-radius: 35%;
    corner-shape: squircle;
  }
}

Who's already using squircles?

The squircle didn't start with CSS - it's been quietly powering the visual language of the world's most refined digital products for years. Here's who led the charge:

Practical use cases

App icons & avatars

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 30%; /* fallback */
  clip-path: url(#squircle);
  object-fit: cover;
}

@supports (corner-shape: squircle) {
  .avatar {
    clip-path: none;
    border-radius: 35%;
    corner-shape: squircle;
  }
}

Cards & containers

.card {
  border-radius: 20px; /* standard fallback */
  padding: 2rem;
  background: #13161e;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}

@supports (corner-shape: squircle) {
  .card {
    border-radius: 28px;
    corner-shape: squircle;
  }
}

Buttons

.btn {
  padding: .75rem 1.5rem;
  border-radius: 12px; /* rounded fallback */
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

@supports (corner-shape: squircle) {
  .btn {
    border-radius: 40%;
    corner-shape: squircle;
  }
}

What's coming next

The CSS Working Group is actively developing the corner-shape specification. Beyond squircle, the spec also proposes values like scoop (concave corners) and notch - opening up a whole new design vocabulary in pure CSS without any SVG hacks.

Until full browser support lands, the SVG clip-path technique is the most reliable approach and works in every modern browser today. It does have one limitation: clip-path hides box-shadow, so shadows need to be applied to a wrapper element.

/* box-shadow workaround with clip-path */
.squircle-wrapper {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.squircle-inner {
  clip-path: url(#squircle);
  background: #13161e;
}

The squircle is no longer just a footnote in Apple's design guidelines. It's becoming a first-class citizen of the web. Start using it today - your corners will thank you.