CSS Border Radius Generator
Generate CSS border-radius values with a visual editor for all four corners.
100% Client-Side
20px
0px200px
border-radius: 20px;
What is CSS Border Radius Generator?
A CSS border-radius generator lets you visually create rounded corners or complex organic shapes by manipulating individual corner radii. It supports both simple uniform rounding and advanced asymmetric values for creative UI elements.
How to Use
- Drag the corner handles to adjust each corner's radius independently
- Use the link toggle to apply the same radius to all corners at once
- Preview the shape on the live element preview
- Copy the generated border-radius CSS property
Frequently Asked Questions
- How do I make a perfect circle with border-radius?
- Set border-radius to 50% on a square element (equal width and height). This creates a perfect circle regardless of the element's size.
- What does the '/' in border-radius values mean?
- The slash separates horizontal and vertical radii for elliptical corners. For example, border-radius: 10px / 20px creates corners that curve more vertically than horizontally.
- Can I round only specific corners?
- Yes, use the four-value shorthand: border-radius: 10px 0 0 10px rounds only the left corners. Order is top-left, top-right, bottom-right, bottom-left.