Most demos need a newer browser

They use :has() and container queries. Update your browser, or on an iPhone update iOS to 16.4 or later.

CSS Squircle Corners

CSS squircle corners use corner-shape: squircle to change a border-radius from a circular arc to a smoother continuous curve. Chrome and Edge 139.

Level
Beginner
Published
Updated
Reading time
4 min

Try it

2 live demos

Your browser can't run this demo

It needs corner-shape, which this browser doesn't support yet, so you're seeing a plainer version. It works in Chrome 139+ and Edge 139+. Firefox and Safari don't support it yet.

Needs corner-shape

round
squircle

// this browser has no corner-shape yet, so both tiles are round

The same radius, a softer curve

bevel
scoop
notch
superellipse(4)

// this browser has no corner-shape yet, so all four tiles are round

The other corner shapes

See the code

Build it

4 snippets to copy

CSS Squircle Corners

HTML

<div class="sc-tile">round</div>
<div class="sc-tile sc-squircle">squircle</div>

CSS

.sc-tile {
  width: 120px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 36px;
  color: #16210a;
  background: #b8ff57;
}

/* One extra line. Browsers without it keep the round
   corners above, so nothing breaks. */
.sc-squircle {
  corner-shape: squircle;
}

The other corner shapes

The same border-radius applies to all four tiles; only the corner-shape value changes. The variant shows how far the available values differ: bevel, scoop, notch, and superellipse(4) each produce a distinct corner.

HTML

<div class="sc-tile sc-bevel">bevel</div>
<div class="sc-tile sc-scoop">scoop</div>
<div class="sc-tile sc-notch">notch</div>
<div class="sc-tile sc-super">superellipse(4)</div>

CSS

/* adds to the .sc-tile rule above */
.sc-bevel { corner-shape: bevel; }
.sc-scoop { corner-shape: scoop; }
.sc-notch { corner-shape: notch; }
.sc-super { corner-shape: superellipse(4); }

Understand it

How it works and 4 properties

A standard border-radius rounds a corner with an arc of a circle. That arc has constant curvature along its length, and at the point where it meets the straight edge the curvature drops abruptly from its peak to zero. A squircle shapes the corner region differently. The curvature is variable, approaching zero near the straight edges, so the transition between curve and edge is gradual.

corner-shape is the CSS property that produces this. It works alongside border-radius, keeping the radius to set the corner's extent while changing only the curve within that region. Browsers without the property show the round corner unchanged.

How it works

The demo pairs two tiles with the same border-radius: 36px. The left tile is the round baseline. The right adds corner-shape: squircle, which replaces the circular arc with a continuous curve. The tile stays the same size; only the shape of the four corner regions changes. In a browser without corner-shape, a note appears through @supports not (corner-shape: squircle) and both tiles look identical.

A circle arc meets the straight side at a single tangent point and curves at full radius all the way to the adjacent side.

corner-shape works as a modifier on border-radius. The squircle is a curve type applied within the corner regions that border-radius defines.

Treat corner-shape as progressive enhancement. Any element using it must have a border-radius that looks acceptable on its own. The @supports not check in the demo is the natural pattern here. It surfaces a note when the property is absent, so a reader in Firefox or Safari sees why the two tiles look the same.

The @supports not (corner-shape: squircle) block checks whether squircle specifically is supported. It does not test the other values used in the variant. A browser that supports squircle but not bevel, scoop, or notch would not show the note, and those variant tiles would appear as round corners.

Accessibility notes

corner-shape changes only the visual shape of element corners. It has no effect on the accessibility tree, focus behavior, or keyboard navigation, so no extra accessibility work is needed for the property itself.

Where squircle corners appear on interactive controls, the usual contrast and focus requirements still apply. A focused button needs a visible :focus-visible ring regardless of corner shape.

Mistakes worth avoiding

  • Using corner-shape without a border-radius. The value applies to corners defined by border-radius, so with none set, nothing changes.
  • Treating it as stable across all browsers.
  • Forgetting the fallback appearance. Designs that depend on the squircle silhouette need to work in round form too.
  • Expecting @supports to catch partial implementations. If a browser parses the syntax but renders it differently, @supports still passes. Test in the browsers you care about.

Ship it

3 features in 4 browsers, 5 questions

Browser support

Feature Chrome Firefox Safari Edge
corner-shape139NoNo139
border-radius433.112
@supports2822912

corner-shape is supported in Chrome and Edge 139. Firefox and Safari have it in preview builds but not stable releases. The fallback in every other browser is the border-radius alone, which produces a round corner.

What you can build with it

  • Buttons and tags. Short rectangular controls, especially pill-shaped ones where the large radius makes the curve between straight edge and corner most apparent.
  • Avatar and thumbnail frames. Profile pictures in square frames, where a squircle crop fills the frame more evenly than a circle and shows more of the subject.
  • Form elements. Inputs and selects on a page that already uses squircle corners on other elements, for a consistent curve throughout.

Frequently asked questions

What is CSS corner-shape?
corner-shape is a CSS property that changes the curve type of a rounded corner. border-radius sets the corner's extent; corner-shape reshapes only the curve within that area. Setting corner-shape: squircle changes the corners from circular arcs to continuous squircle curves.
What is a squircle?
A squircle is a shape whose corners follow a continuous curve with variable curvature: flatter near the straight edges and sharpest at the diagonal.
Does corner-shape work in Firefox and Safari?
Not in stable releases.
Can I use corner-shape without border-radius?
No. corner-shape only modifies the curve type of corners that border-radius has already defined. With no border-radius, or with border-radius: 0, corner-shape has no visible effect.
What other corner-shape values are there?
The spec also defines bevel, scoop, notch, superellipse(), round, and square.

Related CSS examples

  • 🎨 Front Side
    Hover to flip
    ✨ Back Side
    Pure CSS
    Card Two
    Hover me
    No JS needed!

    3D Card Flip

    A card that flips on hover using CSS 3D transforms and perspective.

    Intermediate

  • 75%
    CSS
    60%
    JS
    88%
    HTML

    Animated Donut Chart

    SVG donut chart animated with stroke-dashoffset, with no JavaScript required.

    Advanced

  • An illustrated harbor at dusk with a pink and purple sky, a sun behind mountains, a pier and two sailboats on the water.
    The same harbor scene drawn in flat grayscale, before the color edit.
    Before After

    drag the handle in the bottom right corner

    Before and After Slider

    A draggable before and after image comparison built with resize and overflow, plus toggle and hover variants.

    Intermediate