16 · Corner shape

Corner shape

Native scoop, bevel, notch and squircle corners

Chrome 135+ · experimental

← Index

corner-shape

Defines corner shapes beyond border-radius: round, scoop, bevel, notch and superellipse().

round

scoop

bevel

notch

superellipse()

corner-shape: superellipse(0.6)

superellipse()

The superellipse() function creates "squircle" corners — between a square and a circle, like iOS icons, without SVG math.

border-radius 30%

superellipse(0.7)

corner-shape: superellipse(0.7)

No JS

Before you needed SVG mask + clip-path or libraries for a squircle. Now it's a native CSS property.

css

/* esquinas cóncavas (hacia adentro) */
.cs-scoop {
  border-radius: 30%;
  corner-shape: scoop;
}

/* esquinas en ángulo recto */
.cs-bevel {
  corner-shape: bevel;
}

/* esquinas con muesca */
.cs-notch {
  corner-shape: notch;
}

/* squircle — entre cuadrado y círculo */
.cs-super {
  corner-shape: superellipse(0.6);
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".