CSS Squircle Border Radius

css

CSS now has native squircle support. These are the smooth, Apple-style corners you see on iOS icons and macOS windows.

Usage

It's a separate property that works alongside border-radius:

.box {
  border-radius: 30px;
  corner-shape: squircle;
}

Key things to know:

  • corner-shape only works when border-radius is set
  • You can mix values per-corner: corner-shape: squircle round squircle round

Demo

Standard

border-radius: 30px

Squircle

corner-shape: squircle

The difference is subtle but noticeable at larger radii.

Browser support

Chrome 139+, Edge 139+, Safari 18+. Firefox not yet.