CSS Border Radius Generator
Create rounded corners with full control per corner
Radius Settings
Adjust corners independently or together
Preview
Live border radius preview
border-radius: 10px;About Border Radius
The border-radius CSS property rounds the corners of an element. You can set each corner independently for asymmetric designs, or use a single value for uniform rounding.
Generate CSS border-radius with independent control of each corner. Switch between linked mode (all corners equal) and independent mode for asymmetric shapes. Live preview shows the result instantly.
Key Features
- ✓Independent corner control
- ✓Linked/unlinked mode toggle
- ✓Live shape preview
- ✓Pixel value display
- ✓One-click CSS copy
How to CSS Border Radius Generator
- 1
Set radius values
Adjust radius for all corners or individually.
- 2
Preview shape
See the live shape update.
- 3
Copy CSS
Click copy for the border-radius property.
Common Use Cases
- •Creating pill-shaped buttons
- •Designing rounded card corners
- •Building organic blob shapes
- •Creating custom avatar shapes
Frequently Asked Questions
What units does border-radius use?▼
Pixels (px) is the most common. You can also use percentages — 50% on a square creates a perfect circle.