The corner-top-left-shape property sets the shape of the top-left corner of a box, within the region defined by border-radius. Allows custom superellipse corners — from a regular round arc all the way to a sharp notch..card {
corner-top-left-shape: squircle;
}.badge {
corner-top-left-shape: superellipse(3);
border-radius: 16px;
}roundConvex quarter-ellipse shape. Equivalent to superellipse(1). Default; matches classic border-radius behavior.squircleConvex curve between round and square. Equivalent to superellipse(2). Typical iOS-style icon shape.squareConvex 90deg angle. Equivalent to superellipse(infinity). Visually identical to a sharp corner but animatable.bevelStraight diagonal line — neither convex nor concave. Equivalent to superellipse(0).scoopConcave quarter-ellipse (scooped inward). Equivalent to superellipse(-1).notchConcave 90deg angle — sharp inward notch. Equivalent to superellipse(-infinity).superellipse()Custom corner — takes a number K (or infinity / -infinity). Yields a quarter superellipse with exponent 2^K. Positive K = convex, negative K = concave.CSS Borders and Box Decorations Module Level 4Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
