CSS corner-shape
A visual playground for corner-shape, from squircles to notches, and how every keyword maps to a superellipse.
Your browser does not support corner-shape yet, so the previews only show the border-radius. Chrome and Edge support it from version 139.
Playground
The dashed outline is the same border-radius without a corner-shape.
How corner-shape works
border-radius decides how big a corner is, corner-shape decides the curve inside that space. Every keyword is a superellipse(K).K = 1 is the normal round corner, higher values pull it toward a square,0 is a straight line, and negative values curve inward.
squaresuperellipse(infinity)squirclesuperellipse(2)roundsuperellipse(1)bevelsuperellipse(0)scoopsuperellipse(-1)notchsuperellipse(-infinity)
Per corner
The shorthand takes 1 to 4 values in the same order as border-radius: top left, top right, bottom right, bottom left. So bevel round bevels the top left and bottom right corners.
corner-top-left-shape, corner-top-right-shape, …- One physical corner each.
corner-start-start-shape, corner-start-end-shape, …- The logical versions, they follow the writing mode like border-start-start-radius.
corner-top-shape, corner-left-shape, …- Both corners of one side at once. Also as corner-block-start-shape and friends.
Good to know
- Without a border-radius nothing happens. The radius sets the size of the corner, corner-shape its curve.
- The border, outline, box-shadow, overflow clipping and backdrop-filter all follow the shape.
- Every keyword is a superellipse, so the shape animates smoothly from one to another.
- Browsers without support fall back to plain rounded corners, so it is safe to use today.
- border-radius: 50% with bevel gives a diamond, no clip-path needed.