CSS Border Radius Generator
Visually create CSS border-radius values with independent control over each corner. Adjust the shape, preview it live, and copy the CSS code. Runs entirely in your browser — free and private.
CSS Output
How the CSS Border Radius Generator Works
The CSS border-radius property defines the radius of an element's corners, allowing you to create rounded shapes ranging from slightly softened rectangles to perfect circles and complex organic forms. This visual generator gives you individual control over all four corners — top-left, top-right, bottom-right, and bottom-left — so you can create both symmetric and asymmetric border radius values. The live preview updates instantly as you drag the sliders, showing you exactly how your shape will look before you copy the CSS.
Understanding Border Radius Syntax
The CSS border-radius shorthand property accepts one to four values. A single value like border-radius: 20px applies the same radius to all four corners. Two values set top-left/bottom-right and top-right/bottom-left as pairs. Three values set top-left, top-right/bottom-left, and bottom-right. Four values set each corner individually in clockwise order: top-left, top-right, bottom-right, bottom-left. For example, border-radius: 10px 20px 30px 40px creates an asymmetric shape where each corner has a different curvature.
You can also use percentage values. Setting border-radius: 50% on an element with equal width and height creates a perfect circle. On a rectangle, 50% creates an ellipse. Percentage-based border radius is responsive — it scales with the element's dimensions, making it ideal for profile pictures, avatars, and responsive design components.
Common Border Radius Patterns in UI Design
Modern UI design relies heavily on border radius to create visual softness and approachability. Small radii of 4-8px are standard for buttons, input fields, and cards in most design systems including Material Design and Apple's Human Interface Guidelines. Medium radii of 12-20px create more pronounced rounding, popular for modal dialogs, tooltips, and featured cards. Large radii of 24px or more create pill shapes for tags, badges, and call-to-action buttons. Using consistent border radius values throughout your design system creates visual coherence and a polished user experience.
Advanced Techniques
Beyond simple rounded corners, CSS border-radius supports elliptical values using the slash syntax: border-radius: 50px / 20px, which creates an elliptical curve with different horizontal and vertical radii. Combined with creative width and height ratios, you can create organic blob shapes, leaf forms, and other complex shapes using only CSS. This technique is commonly used for decorative background elements, abstract illustrations, and creative hero sections in modern web design without requiring SVG or image files.
Browser Compatibility and Best Practices
CSS border-radius has enjoyed universal browser support since 2011. The -webkit- and -moz- vendor prefixes are completely unnecessary for any browser released in the last decade. When using border-radius with overflow: hidden to clip content within rounded containers, some older browser versions had rendering issues, but these have been resolved in all current browsers. For optimal rendering performance, avoid animating border-radius values on large elements — instead, use CSS transforms for animations and apply border-radius as a static property.
Frequently Asked Questions
What is CSS border-radius?
CSS border-radius is a property that rounds the corners of an element's outer border edge. You can set a single value for all corners or specify different values for each corner (top-left, top-right, bottom-right, bottom-left) to create asymmetric shapes.
Can I set different values for each corner?
Yes. CSS border-radius accepts up to four values in shorthand: border-radius: top-left top-right bottom-right bottom-left. You can also use individual properties like border-top-left-radius for precise control. This tool lets you adjust each corner independently or link them to move together.
How do I make a perfect circle with border-radius?
Set border-radius to 50% on an element with equal width and height. For example, a 200x200px div with border-radius: 50% becomes a perfect circle. If width and height differ, 50% creates an ellipse instead.
What is the maximum border-radius value?
There is no strict maximum, but the effective radius is limited by the element's dimensions. If the radius exceeds half the width or height, the browser automatically clamps it. Setting border-radius: 9999px is a common trick to ensure maximum rounding regardless of element size.
Does border-radius affect performance?
Border-radius has negligible performance impact on modern browsers. It is applied during the painting phase and is GPU-accelerated. Even complex border-radius values on many elements will not cause noticeable performance issues.
Is border-radius supported in all browsers?
Yes. CSS border-radius has been supported in all major browsers since 2011, including Chrome, Firefox, Safari, Edge, and Opera. The -webkit- prefix is no longer needed for any modern browser. It is one of the most widely supported CSS properties.