Border Radius
CSS Border Radius Visual Configurator
Quick Presets:
TL: 12px TR: 12px BL: 12px BR: 12px
Corner Settings
px
px
px
px
#6366f1
Generated CSS Code
border-radius: 12px;Border Radius Generator Guide
Key Features
- Independent Corner Control - Set each corner's radius individually
- Dual Unit Support - Switch between px and % values
- Link Mode - Link all corners together for unified adjustment
- Shape Presets - Built-in circle, capsule, leaf, droplet and more
Use Cases
- Button, card, avatar and other UI component corner design
- Quick implementation of circles and capsule shapes
- Creative organic shapes (leaves, droplets, etc.)
- Learning and understanding CSS border-radius