Squircles in Tailwind

Squircles are everywhere in modern UI: app icons, cards, buttons. For years though, drawing a real one meant reaching for SVG masks, clip-path, or a JS library. On a side project I'm building I get them straight from Tailwind now, with a tiny utility and zero dependencies. Here's how to wire it up.

A squircle is a superellipse. Instead of a circular arc, the corner follows a smoother continuous curve, the look Apple popularized. The key idea is that border-radius still sizes the corner, while the new corner-shape property only changes the curve. So corner-shape: squircle keeps your existing radii and just swaps the arc for a superellipse.

The trick is exposing that as a Tailwind v4 utility. Tailwind v4 is configured CSS-first, so you add this directly to your globals.css, with no tailwind.config and no plugin:

@utility squircle {
  @supports (corner-shape: squircle) {
    corner-shape: squircle;
  }
}

That's the whole base utility. It just sets the curve and leans on whatever radius is already on the element, so you drop a squircle next to your usual rounded-* class and you're done.

If you need more granularity, say you want a different radius while a corner is rendered as a squircle so it reads as more prominent, you can add a dynamic utility too:

@utility squircle-* {
  @supports (corner-shape: squircle) {
    corner-shape: squircle;
    border-radius: --value([integer]);
    border-radius: --value(--radius- *);
  }
}

squircle-* is a functional utility, where --value(...) is Tailwind's resolver rather than native CSS. --value([integer]) matches an arbitrary value like squircle-[12], and --value(--radius- *) matches a named value against your --radius-* theme scale. So squircle-3xl compiles to border-radius: var(--radius-3xl) plus the squircle curve, letting you bump the radius independently of the rounded-* fallback.

Both utilities live inside @supports (corner-shape: squircle), which is what makes them safe to use. The rule is: always pair them with a regular rounded-* class, never one without the other:

<div class="squircle-3xl rounded-2xl">...</div>

rounded-2xl is the fallback every browser understands. In supporting browsers, squircle-3xl upgrades that same corner to a superellipse and overrides the size with the squircle-tuned radius. In unsupporting ones, the @supports block emits nothing and you're left with a plain rounded corner. No JS, no layout shift.

The one caveat is reach. corner-shape is young, having shipped in Chrome 139 (mid-2025), so check current Safari and Firefox support before you lean on it. That's exactly what the demo above shows: if both tiles look identically rounded, your browser hasn't shipped it yet, and the fallback is quietly doing its job.

A handful of lines of CSS in your Tailwind setup, zero dependencies, and squircles everywhere the moment browsers catch up.