What is Border Radius Generator?
Free online border radius generator. Visually adjust all four corner radii. Supports irregular (elliptical) corners and percentage values. Real-time preview, one-click CSS export. Perfect for buttons, cards, and avatars.
Use Cases
- ◆Button styling
- ◆Card design
- ◆Avatar cropping
- ◆Irregular shapes
How to Use
- 1Drag sliders to adjust each corner
- 2Preview in real time
- 3Copy CSS code
Features
- ✓Independent corner control
- ✓Ellipse support
- ✓Live preview
- ✓CSS export
FAQ
What does percentage border-radius mean?
Percentages are calculated based on element width and height. 50% creates a perfect circle on square elements.
Can I create organic shapes?
Yes, by setting different radii for each corner.
Can I create a perfect circle?
Yes. Set border-radius to 50% on a square element. For rectangles, use 9999px.
What are elliptical border radii?
Use slash notation like border-radius: 50%/100px for elliptical corners where horizontal and vertical radii differ.
Can each corner be different?
Yes. Use border-radius: TL TR BR BL to set each corner independently for organic shapes.
Is border-radius performant?
Yes. border-radius is GPU-accelerated and does not trigger layout reflow.