CSS Border Radius Generator
Create complex CSS border-radius shapes visually with a live preview.
Quick Shapes
How It Works
Use sliders to control all four corner radii individually. The live preview updates instantly and you can copy the generated CSS border-radius property.
**CSS Border Radius Generator — Create Perfect Shapes Visually**
Border radius has evolved from simple rounded corners to a powerful tool for creating complex organic shapes. Our generator lets you control all eight values (each corner has two radii) with live preview and instant CSS output.
**CSS border-radius Syntax**
Simple (all corners equal): `border-radius: 10px;`
Shorthand (top-left, top-right, bottom-right, bottom-left): `border-radius: 10px 20px 30px 40px;`
Full control with elliptical corners: `border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;`
The slash notation separates horizontal and vertical radii for each corner, enabling truly organic shapes.
**Common Shape Recipes**
| Shape | CSS |
|---|---|
| Pill/Capsule | border-radius: 9999px |
| Circle (square element) | border-radius: 50% |
| Squircle | border-radius: 30% |
| Teardrop | border-radius: 50% 50% 0 0 |
| Wave shape | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% |
**Percentage vs Pixel Values**
- **Pixels** — Absolute radius (10px remains 10px regardless of element size)
- **Percentage** — Relative radius (50% always creates a circle on a square element)
For fluid responsive designs, percentage-based radii adapt to element size.
**Organic Blob Shapes**
The most visually interesting shapes use different values for all eight sub-values:
`border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%`
Our generator includes a Randomise button to discover interesting organic shapes, plus a gallery of pre-made blobs.
**Animation Potential**
Border radius is animatable with CSS transitions and animations. Animating border-radius creates flowing organic shape morphing effects, popular in modern web design.