v147 · CSS

Squircle Showcase

Compare corner-shape: squircle with rounded corners, superellipse(4), per-corner mixes, and a malformed value that the browser must reject.

Feature detection: checking corner-shape support...

Interactive shape lab

Shape value

Border radius

Corner set

Application icons

CAM
MSG
BOX
WEB

Avatars

AK
BL
CM
DN

Choose malformed to try corner-shape: superellipse(foo). The invalid declaration is ignored, so a valid fallback shape remains in effect.

Same radius, different corner contracts

circle border-radius: 50%
round corner-shape: round
squircle corner-shape: squircle
superellipse(4) more square

Contract probes

corner-shape: squircle

pending

corner-shape: superellipse(4)

pending

four-value shorthand

pending

corner-top-left-shape

pending

reject malformed value

pending

.app-icon {
  border-radius: 22%;
  corner-shape: squircle;
}

.mixed-card {
  border-radius: 22%;
  corner-shape: bevel scoop notch squircle;
}

.bad-value {
  corner-shape: superellipse(foo); /* ignored by the parser */
}

references

implementation reference

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