The corner-shape shorthand sets the shape of all four corners of a box, within the region of border-radius. Accepts 1–4 values in top/right/bottom/left order (like border-radius). Missing values fill in per the standard pattern (right→left, top→bottom, top→right)..card {
corner-shape: squircle;
}.badge {
corner-shape: round notch round notch;
border-radius: 16px;
}roundConvex quarter-ellipse. Equivalent to superellipse(1). Default.squircleCurve between round and square. Equivalent to superellipse(2).squareConvex 90deg angle. Equivalent to superellipse(infinity).bevelStraight diagonal line. Equivalent to superellipse(0).scoopConcave quarter-ellipse. Equivalent to superellipse(-1).notchConcave 90deg angle. Equivalent to superellipse(-infinity).superellipse()Takes K (or infinity / -infinity). Quarter superellipse with exponent 2^K. e.g. superellipse(2.5) for a corner rounder than squircle.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
