v147 · CSS

Shape Gallery

All six corner-shape values displayed side by side. Adjust border-radius with the slider and toggle the background colour. Every shape works within the region defined by border-radius.

Feature detection: checking…
25%
round corner-shape: round
squircle corner-shape: squircle
bevel corner-shape: bevel
notch corner-shape: notch
scoop corner-shape: scoop
superellipse(2) ≈ squircle
superellipse(4) more square
superellipse(8) nearly square 
/* corner-shape works inside the region defined by border-radius */
.squircle {
  border-radius: 25%;
  corner-shape: squircle;       /* iOS-style app icon */
}
.bevel {
  border-radius: 20%;
  corner-shape: bevel;          /* flat cut corners */
}
.notch {
  border-radius: 20%;
  corner-shape: notch;          /* concave inward cut */
}
.scoop {
  border-radius: 20%;
  corner-shape: scoop;          /* concave smooth curve */
}
.superellipse {
  border-radius: 25%;
  corner-shape: superellipse(4); /* parametric, 1=circle…∞=square */
}

contract checks

accept squircle checking…
accept superellipse(4) checking…
reject superellipse(foo) checking…
reject unknown keyword checking…

Use the malformed-value button to try corner-shape: superellipse(foo) on the squircle tile.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗