How to Use CSS border-radius (Every Shape Possible)
CSS border-radius rounds the corners of any element. While border-radius: 8px covers most card and button designs, the property is far more powerful — it can create circles, pills, organic shapes, and asymmetric curves using eight-value syntax with the slash separator.
- Master CSS border-radius: circles, pills, organic shapes, and individual corner control.
- Covers basic values.
- Covers individual corner control.
- The 8-Value Syntax for Organic Shapes.
- Covers common patterns.
Basic Values
Single value rounds all corners equally: border-radius: 12px creates consistent rounded corners. Percentage values create relative rounding: border-radius: 50% on a square element creates a perfect circle. border-radius: 9999px on a rectangle creates a pill/capsule shape.
Individual Corner Control
Set each corner independently: border-radius: 20px 0 20px 0 rounds top-left and bottom-right (creating a leaf shape). The order is top-left, top-right, bottom-right, bottom-left — clockwise from the top-left.
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.The 8-Value Syntax for Organic Shapes
The slash syntax sets horizontal and vertical radii independently:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Values before the slash control horizontal radii; after the slash control vertical radii. This creates organic blob-like shapes from a simple rectangle. The Border Radius Lab lets you drag control points visually to create these shapes and copy the CSS.
Common Patterns
Circle: border-radius: 50% (element must be square). Pill/capsule: border-radius: 9999px. Card: border-radius: 8px to 16px. Button: border-radius: 6px to 12px. Avatar: border-radius: 50% with overflow: hidden. Notch: large radius on two adjacent corners, zero on the others.