Corners that are not arcs

Q: How do I make a squircle in CSS?

Give the element a border-radius and then change what that radius draws with corner-shape: squircle. For finer control superellipse() takes a curvature, and the keywords are just names for points on that scale: bevel is 0, the ordinary circular arc is 1, squircle is 2, and notch is negative infinity.

Q: What is the difference between a squircle and border-radius?

A plain border-radius draws a quarter circle, which meets the straight edge at a visible change of curvature. A squircle is a superellipse, so the curve eases into the edge instead, and a row of icons drawn that way looks evenly weighted where circular corners look pinched.

Live demo

round

squircle

bevel

notch

Caveat and fallback

CaveatThe property reshapes a radius rather than creating one, so a corner with no border-radius stays square no matter what you set. All four tiles above carry the same 26px. The shape governs the border, the background, the shadow and any clipping together, which is the point, and also why a child relying on the old circular corner to peek out will now be cut differently.

FallbackA value an engine does not know makes the declaration invalid and you keep the ordinary rounded corner, which nobody is going to file a bug about. Worth a @supports (corner-shape: squircle) only when the tighter silhouette is load bearing, such as an icon that has to sit flush inside it.

Source code

HTML + CSS

<div class="tile">squircle</div>

.tile {
  border-radius: 26px;   /* required */
  corner-shape: squircle;
}
/* keywords are shorthands for a curvature:
   bevel 0, round 1, squircle 2, notch -inf */
.tile { corner-shape: superellipse(1.5); }

Published 17 Oct 2026

Questions

How do I make a squircle in CSS?

Give the element a border-radius and then change what that radius draws with corner-shape: squircle. For finer control superellipse() takes a curvature, and the keywords are just names for points on that scale: bevel is 0, the ordinary circular arc is 1, squircle is 2, and notch is negative infinity.

Why is corner-shape doing nothing?

Almost always because there is no radius for it to reshape. The property changes the curve of an existing border-radius rather than creating one, so an element with square corners stays square whatever value you give it.

What is the difference between a squircle and border-radius?

A plain border-radius draws a quarter circle, which meets the straight edge at a visible change of curvature. A squircle is a superellipse, so the curve eases into the edge instead, and a row of icons drawn that way looks evenly weighted where circular corners look pinched.