demo · v139
Component Kit
Pick a corner-shape and every component in the kit updates — buttons, badges, avatars, chips, and inputs, all from one CSS property. See how squircle softens, notch sharpens, and bevel chamfers the same set of components.
corner-shape: squircle
Checking CSS corner-shape support…
Buttons
Badges & Tags
New
Beta
v2.1
Avatars
PK
AB
CD
Chips
JavaScript
CSS
HTML
Text Input
/* All components share the same corner-shape.
border-radius sets the curve size; corner-shape sets what it looks like. */
.c-btn, .c-badge, .c-avatar, .c-chip, .c-input {
border-radius: 10px;
corner-shape: squircle; /* round | squircle | superellipse | notch | scoop | bevel | straight */
}
/* squircle → smooth iOS-style continuous curve
notch → V-shaped inward cuts at corners
scoop → concave arc at each corner
bevel → straight diagonal chamfer
straight → hard corner (same as border-radius: 0) */