SwiftUI-accurate squircles in every browser — as a Tailwind plugin.
▸ Live playground — edit a class, watch the clip-path.
The squircle is the corner that makes Apple's UI feel settled — a continuous
curve that flows into the edge instead of snapping into an arc. squircle
brings it to the web as Tailwind utilities, rendering the real SwiftUI corner
(not the rougher CSS superellipse(2)) in every evergreen browser.
<div class="rounded-2xl squircle">Hello, continuous corner.</div>npm i @spatio-labs/squircletailwindcss is an optional peer dependency.
Register the plugin, then call the runtime once on the client.
// tailwind.config.js
const squircle = require("@spatio-labs/squircle");
module.exports = {
plugins: [squircle],
};// app entry
import { initCorners } from "@spatio-labs/squircle/corners";
initCorners();That's it. initCorners() scans the page, draws each corner with a clip-path,
and keeps it sharp through resizes and DOM changes. clip-path + ResizeObserver
ship in every modern browser, so the result is identical in Chrome, Firefox, and
Safari.
<div class="rounded-2xl squircle">…</div> <!-- SwiftUI continuous corner -->
<div class="rounded-2xl squircle-[0.85]">…</div> <!-- custom smoothing, 0–1 -->
<div class="rounded-2xl corner-superellipse-3">…</div> <!-- raw CSS superellipse exponent -->
<div class="rounded-xl corner-scoop">…</div> <!-- concave -->| Utility | Shape |
|---|---|
squircle · corner-squircle |
SwiftUI continuous corner (iOS smoothing) |
squircle-{0,45,ios,60,full,100} · squircle-[0.85] |
Continuous corner, custom smoothing 0–1 |
corner-round corner-bevel corner-scoop corner-notch corner-square |
The CSS corner-shape keywords |
corner-superellipse-{0..4} · corner-superellipse-[3.5] · corner-superellipse-[-1] |
Raw superellipse exponent |
The radius comes from your normal Tailwind radius utilities (rounded-md,
rounded-[20px]); the corner-* class only changes the corner shape.
This is the part most squircle implementations miss. A normal CSS border on a
clip-path'd squircle gets shaved off at the corners — so others either drop
borders or fall back to a round border-radius. The runtime instead strokes the
same path, clipped to the shape, giving a crisp border that hugs the squircle.
Just add a normal Tailwind border — it's handled automatically:
<div class="rounded-2xl squircle border-2 border-blue-500">Border follows the corner.</div>module.exports = {
plugins: [squircle({ global: true })],
};<div class="rounded-md">Every rounded element is now a squircle.</div>The runtime stands alone, driven by a data-corner-shape attribute that accepts
squircle / continuous or any <corner-shape-value>:
<div style="border-radius: 24px" data-corner-shape="squircle"></div>
<div style="border-radius: 24px" data-corner-shape="superellipse(3)"></div>import { initCorners } from "@spatio-labs/squircle/corners";
initCorners();A plain-CSS file is included for the native corner-shape values (Chromium 139+,
no runtime): @import "@spatio-labs/squircle/squircle.css".
Native corner-shape
is Chromium-only today, and its squircle keyword is superellipse(2) — close,
but tighter than Apple's curve. SwiftUI's .continuous corner spreads the bend
onto the straight edges (the Figma smoothing model,
iOS ≈ 0.6). squircle draws that exact curve, so a single class gives you
the genuine iOS look everywhere.
The runtime needs clip-path + ResizeObserver, supported in every evergreen
browser. Native CSS corner-shape (Chromium 139+) is used as a progressive
enhancement; older browsers fall back to a normal border-radius.
| Browser | Supported |
|---|---|
| Chrome / Edge | ✅ all evergreen |
| Safari | ✅ 13.1+ |
| Firefox | ✅ 69+ |
| Older / no JS | falls back to border-radius |
Full plugin options and runtime exports (initCorners, squirclePath,
superellipsePath, parseShape, supportsNative) are in the
API reference.
- Desperately seeking squircles — Figma
- The CSS
corner-shapespecification
ISC © Matthew Park (@mattpark)