How I Brought CSS corner-shape to Safari and Firefox

Mikhail Mogilnikov — Mon, 15 Jun 2026 22:04:56 +0000

How I Brought CSS `corner-shape` to Safari and Firefox

The new CSS corner-shape property is one of the most exciting additions to modern CSS.

It allows developers to create squircles, superellipses, scoops, notches, and other corner geometries using pure CSS:

.card {
  corner-shape: squircle;
  border-radius: 48px;
}

Unfortunately, there's a catch.

Today, corner-shape only works in Chromium-based browsers. Safari and Firefox ignore the property entirely and fall back to ordinary rounded corners.

As a result, the same stylesheet can produce completely different geometry depending on the browser.

Why This Matters

For years, designers have relied on SVG masks, clip-paths, custom canvas renderers, and various smoothing tricks to achieve shapes that go beyond traditional rounded rectangles.

The arrival of corner-shape finally gives us a standard CSS solution.

Instead of describing geometry through SVGs or custom rendering code, we can express it directly in CSS:

.card {
  corner-shape: squircle;
  border-radius: 48px;
}

The problem is browser support.

A feature that's only available in one browser is difficult to adopt in production.

Existing Approaches

Before building a polyfill, I explored several alternatives:

SVG masks
clip-path
canvas rendering
custom squircle implementations

Most of them work well for simple demos.

However, things become much more complicated when you start dealing with real UI components.

Questions quickly appear:

What about borders?
What about outlines?
What about shadows?
What about SSR?
What about transitions?
What about responsive layouts?

More importantly, none of these approaches actually implement the CSS specification.

They simply generate a shape that looks similar.

The Goal

I wanted developers to be able to write standard CSS and get consistent results everywhere.

.card {
  corner-shape: squircle;
  border-radius: 48px;
}

The desired behavior is straightforward:

Chromium uses native rendering.
Safari and Firefox use a fallback.
The geometry remains consistent.

Developers shouldn't need separate implementations for different browsers.

Matching Native Geometry

This turned out to be the hardest part of the project.

Generating a squircle is relatively easy.

Generating a squircle that visually matches Chromium's implementation is much harder.

Even small geometric differences become obvious when shapes are compared side by side.

A significant portion of the work went into reproducing the geometry defined by the CSS Borders Level 4 specification and comparing the output against native browser rendering.

The goal wasn't to create a shape that looked close enough.

The goal was to create a fallback that felt indistinguishable from native rendering.

Beyond Geometry

A production-ready solution requires more than shape generation.

The implementation also needed to support:

borders
outlines
shadows
background images
gradients
responsive layouts
width and height transitions
server-side rendering

Many of these features introduce additional geometry and rendering challenges that don't appear in simple shape demos.

Native-First Architecture

One of the design goals was to avoid replacing native browser behavior.

When corner-shape is available, the browser should remain responsible for rendering.

Hyperellipse only activates in browsers that don't support the property.

The result is a native-first approach:

Native rendering in Chromium
Fallback rendering in Safari and Firefox

Developers continue using the same CSS API everywhere.

SSR Support

Another challenge was SSR.

Without careful handling, shapes can visibly change during hydration when JavaScript loads.

To avoid that, Hyperellipse includes an SSR-friendly strategy that minimizes visual differences before the runtime becomes active.

This allows components to remain visually stable from the first paint.

The Result

The final result is Hyperellipse, an open-source CSS corner-shape polyfill.

It brings:

squircles
superellipses
scoops
notches
bevels
squares

to browsers without native support while preserving native rendering where support already exists.

Example

.card {
  --corner-shape: squircle;
  border-radius: 48px;
}

import { registerHyperellipse } from "hyperellipse";

registerHyperellipse();

Links

Documentation:

hyperellipse

CSS polyfill for squircles, superellipses, scoops, notches in any browser. Supports every frontend framework. SSR-friendly. Open-source.

hyperellipse.vercel.app

GitHub:

mikhailmogilnikov / hyperellipse

CSS corner-shape polyfill — squircles, superellipses, scoops & notches

hyperellipse

Docs: hyperellipse.vercel.app

A transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes.

Native rendering where the browser already supports corner-shape. A spec-accurate JS fallback everywhere else (Safari, Firefox).

.card {
  --corner-shape: squircle;
  border-radius: calc(24px * var(--corner-scale, 1));
  background: #4f46e5;
}

import { registerHyperellipse } from "hyperellipse";

registerHyperellipse();

Features

Progressive — supporting browsers get a tiny zero-specificity CSS bridge; no observers, no layout work in JS
Spec-aligned geometry — superellipse math from CSS Borders 4, so Chrome and the fallback match
Real-world CSS — backgrounds, gradients, borders, box-shadow, outline + outline-offset
SSR-friendly — optional --corner-scale snippet removes the flash of overly round corners before hydration
Tiny API — one registerHyperellipse() call; idempotent and SSR-safe

Installation

npm install hyperellipse
# bun add hyperellipse
# pnpm add hyperellipse

…

View on GitHub

I'm curious to hear feedback from anyone experimenting with corner-shape, browser rendering, or modern CSS geometry.

DEV Community: Mikhail Mogilnikov

How I Brought CSS corner-shape to Safari and Firefox

How I Brought CSS corner-shape to Safari and Firefox

Why This Matters

Existing Approaches

The Goal

Matching Native Geometry

Beyond Geometry

Native-First Architecture

SSR Support

The Result

Example

Links

hyperellipse

mikhailmogilnikov / hyperellipse

CSS corner-shape polyfill — squircles, superellipses, scoops & notches

hyperellipse

Features

Installation

How I Brought CSS `corner-shape` to Safari and Firefox