CSS corner-shape: Squircles, Scoops and Browser Support

Published October 2, 2026 · 11 min read · by the CSS DNA team

Quick answer: corner-shape changes the shape of corners that border-radius has already rounded. It takes round, squircle, bevel, scoop, notch, square or superellipse(K), and does nothing when the radius is zero. As of October 2026 it is stable only in Chrome and Edge 139+. Firefox Nightly and Safari Technology Preview have it, so wrap it in @supports (corner-shape: round) and let plain rounded corners be the fallback.

For a decade the answer to “how do I make a squircle in CSS” was an SVG mask, a clip-path with a hand-computed path, or a JavaScript library that measured the box and redrew it on resize. corner-shape replaces all three with one property, and unlike a mask it keeps your border, shadow and outline attached to the shape. The catch is support, and a parameter scale that a lot of tutorials have misread.

The correction: superellipse(4) is not the squircle

Several articles about this property describe superellipse(4) as the “true” squircle, because in mathematics the squircle is the superellipse with exponent 4 (x⁴ + y⁴ = 1). That is correct math and the wrong CSS. The argument to superellipse() is not the exponent. The CSS Borders Level 4 specification writes the curve as x^2K + y^2K = 1, where K is the value you pass. So the exponent is 2 to the power of K:

The mathematical squircle is superellipse(2), which is exactly what the squircle keyword maps to. Write superellipse(4) and you get an exponent of 16, which at normal radii is hard to tell from a square corner. The spec itself warns that a K of 10 “is already nearly indistinguishable from a square.” MDN’s reference lists the same keyword mapping.

The log scale is deliberate. Every number is valid, the bevel sits at zero, and a negative value is the mirror image of its positive twin: superellipse(-2) is a squircle-shaped scoop. Once you think of K as “how far from a diagonal,” the slider in the playground below makes sense quickly.

Browser support as of October 2, 2026

Sources: Can I Use (about 71% of global traffic), the Firefox Nightly 158 notes, and WebKit’s Safari Technology Preview 251 notes. If you read in August that only Chromium had any implementation, that was true then. Both other engines picked it up in the following four weeks, and STP 252 and 253 already fixed outline, shadow and thick-border rendering bugs, which is the usual sign of an engine heading toward a release. No date has been announced for either. The property is also not Baseline and MDN marks it experimental.

In practice that means a roughly one-in-three chance any given visitor sees your fallback. That third includes nearly every iPhone user, since browsers on iOS run on WebKit almost everywhere.

How corner-shape depends on border-radius

border-radius decides how big each corner is. corner-shape decides what curve fills that area. MDN states the dependency without hedging: if the radius “resolves to 0, corner-shape will have no effect.” That makes it the most common reason the property appears broken.

.card {
  border-radius: 28px;     /* the size of the corner */
  corner-shape: squircle;  /* the curve inside it */
}

.tag {
  border-radius: 0 12px 12px 0;
  corner-shape: bevel;     /* only the two right corners change */
}

A few more rules that come from the spec and the Chromium implementation:

• corner-shape is a shorthand for corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape and corner-bottom-left-shape, and it takes one to four values in the same clockwise order as border-radius. Logical longhands such as corner-start-start-shape exist too.
• Elliptical radii still work. border-radius: 40px / 16px with bevel gives you a shallow slanted cut.
• Borders, outlines, box shadows (outer and inset), backdrop-filter, background painting and overflow clipping all follow the shape. That is what clip-path could never give you.
• It animates. Each keyword computes to a superellipse() value, so transition: corner-shape .3s morphs a bevel into a squircle smoothly. square exists for exactly this reason: it looks like border-radius: 0 but can be interpolated.
• It is ignored when the newer border-shape property is set on the same element.

Corner-shape playground

.box {
  border-radius: 36px;
}

@supports (corner-shape: round) {
  .box {
    corner-shape: squircle;
  }
}

What each shape is good for

squircle

App icons, avatars, cards and buttons that should feel softer than a rectangle but less bubbly than a large radius. The flat stretch of side is longer than with round at the same radius, so you will probably want a somewhat bigger border-radius than you are used to for a similar sense of roundness. Drag the radius slider with squircle selected and compare.

bevel

Tags, ribbons, “sci-fi” HUD panels and price flags. Combine it with an asymmetric radius, for example border-radius: 0 50% 50% 0 / 0 50% 50% 0, and the right edge becomes an arrow point without any pseudo-element.

scoop and notch

Ticket stubs, coupon edges and the inverted corners on tabs that merge into a panel. These used to need radial-gradient masks. One warning: concave corners shrink the visible box, so text near a corner can collide with the cut. Add padding at least as large as the radius.

Mixing corners

.speech-bubble {
  border-radius: 24px 24px 24px 0;
  corner-shape: squircle squircle squircle square;
}

.ticket {
  border-radius: 18px;
  corner-shape: scoop;          /* all four bitten out */
}

Progressive enhancement with @supports

Plain corner-shape: squircle with no guard is already safe: a browser that does not know the property drops the declaration and draws ordinary rounded corners. For squircle that fallback is close enough that most people will never notice. The guard matters when the shape changes the design, because the radius you picked for a scoop or a notch looks nothing like a rounded corner at the same size.

.ticket {
  border-radius: 6px;           /* modest corners everywhere */
}

@supports (corner-shape: scoop) {
  .ticket {
    border-radius: 18px;        /* the big radius only where it becomes a scoop */
    corner-shape: scoop;
  }
}

Test for the property with a keyword value, as above. @supports (corner-shape: superellipse(2)) also works, and is the stricter check if you rely on the function. In JavaScript the same test is CSS.supports('corner-shape', 'squircle').

Fallbacks that draw the real shape

When the rounded-corner fallback is not acceptable, you have two options in browsers without corner-shape, and both have costs that the native property does not.

clip-path: polygon() with calc()

Sample the superellipse at a handful of points per corner and anchor the right and bottom corners with calc(100% - …). The polygon then scales with the element, so it works for fluid widths. The playground above generates this for you when you tick the fallback box. The cost: clip-path clips everything outside the outline, including the outer shadow and half the border. Put the shadow on a parent with filter: drop-shadow() instead, and use a background inset instead of a border.

An SVG mask, for fixed-size elements

For avatars and icons that are always the same size, a mask image is simpler:

.avatar {
  width: 64px;
  height: 64px;
  mask: url(squircle-64.svg) center / 100% 100% no-repeat;
}

@supports (corner-shape: squircle) {
  .avatar {
    mask: none;
    border-radius: 22px;
    corner-shape: squircle;
  }
}

A mask stretched across a box with a different aspect ratio distorts the corners, which is why this only suits fixed sizes. Like clip-path, a mask also hides the outer shadow and outline.

How to check and debug corner-shape

1. Confirm the browser. Run CSS.supports('corner-shape', 'round') in the console. false means you are looking at the fallback and nothing below applies.
2. Check the computed radius. In the Computed tab, filter for radius. If every corner resolves to 0px, the shape has nothing to work with. A later rule resetting border-radius: 0 is the usual culprit, and a utility class from a framework is the usual source of that rule.
3. Check the computed shape. Filter for corner. Chrome lists each longhand, such as corner-top-left-shape, with the keyword or superellipse() value you wrote. If you see the initial round, your declaration lost the cascade or has an invalid value (Chrome strikes out invalid declarations in the Styles pane).
4. Look for border-shape on the same element. If it is set, corner-shape is ignored by design.
5. Small radius, subtle change. At border-radius: 6px the difference between round and squircle is a pixel or two. Turn the radius up to check the property is applying, then back down.

If you work across a lot of components, the radius and shape scale is worth documenting the same way you would spacing or color. Our guide to extracting design tokens covers how to pull those scales out of an existing site, and copying CSS from any website covers what breaks when you paste a single rule into your own project.

Where this sits among 2026’s CSS features

corner-shape belongs in the same bucket as @function and scroll-driven animations from our Modern CSS in 2026 roundup: real, shipping in Chromium, and safe as decoration because the fallback is acceptable. It is a better candidate for early adoption than most of that list, since a browser that ignores it still draws a perfectly normal rounded box. If you want a feature that changes layout rather than paint, CSS masonry with Grid Lanes is the other one to watch this year, and its support story is almost the reverse.