Border Radius Generator

Preview
0px
0px
0px
0px
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. Suitable for buttons, cards, and avatars.
▶Use Cases4 scenarios
  • ◆Button styling
  • ◆Card design
  • ◆Avatar cropping
  • ◆Irregular shapes
▶How to Use3 steps
  1. 1Drag sliders to adjust each corner
  2. 2Preview in real time
  3. 3Copy CSS code
▶Features4 features
  • ✓Independent corner control
  • ✓Ellipse support
  • ✓Live preview
  • ✓CSS export
▶FAQ7 questions
What is a border radius generator?
An online CSS style generator. Input: border-radius values for four corners (pixels or percentages). Output: border-radius CSS code with live preview. Used by front-end developers and UI designers. Everything runs locally in your browser.
What does percentage border-radius mean?
Percentages are calculated based on element width and height. 50% creates a circle on square elements.
Can I create organic shapes?
Yes, by setting different radii for each corner.
Can I create an exact 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.