demo · v139

Squircle Playground

corner-shape changes the curve used to draw rounded corners. superellipse(3) gives the iOS-style squircle; squircle is shorthand for superellipse(2.5). Drag radius and shape to feel the difference.

Requires Chrome 139+ with corner-shape support. If you see a normal rounded rectangle, your browser is rendering border-radius without the new corner-shape descriptor.
drag radius
40px
200px

the css

.tile {
  width: 200px;
  height: 200px;
  border-radius: 40px;
  corner-shape: squircle;  /* or superellipse(N), bevel, round */
}

see also