I predict that corner shapes in CSS will be the rage in 2026. Currently, at 66%, support is limited, but given Apple’s use of it in its icon design, I suspect WebKit support is not far off. There are several shapes: square, round, notch, scoop, bevel, and what I suspect will be the new standard in 2026 — the squircle.

What is a squircle?


A CSS squircle is a softly rounded shape that sits between a square and a circle, with corners that blend smoothly rather than forming sharp angles or perfectly round arcs. Designers like squircles because they feel more natural and less boxy than standard rounded corners, giving buttons, cards, and app elements a modern, balanced look. 

Plain

Squircle

Squircle – 100vw

Notch

Scoop

Bevel

The example above uses a 30px border radius, except for the one with a 100vw radius, which highlights the shape’s elegance. Obviously, if you are not using a Chromium-based browser, they will all look the same.

I think all of the shapes will have their use, and I am excited to see what the CSS wizards come up with as adoption grows.

/* Corner-shape utilities */
:root {
  --cs-round: round;
  --cs-squircle: squircle;
  --cs-bevel: bevel;
  --cs-scoop: scoop;
  --cs-notch: notch;
  --cs-straight: straight;
}@supports (corner-shape: squircle) {
  .cs--round {
    corner-shape: round;
  }
  .cs--squircle {
    corner-shape: squircle;
  }
  .cs--bevel {
    corner-shape: bevel;
  }
 
  .cs--scoop {
    corner-shape: scoop;
  }
  .cs--notch {
    corner-shape: notch;
  }
  .cs--straight {
    corner-shape: straight;
  }
  /* Semantic alias */
  .cs--none {
    corner-shape: straight;
  }
  /* State / utility helpers */
  .cs--inherit {
    corner-shape: inherit;
  }
  .cs--initial {
    corner-shape: initial;
  }
  .cs--unset {
    corner-shape: unset;
  }
}
CSS