Border Radius Generator
Free visual CSS border-radius generator. Design rounded corners with live preview. Adjust each corner individually or uniformly. Copy production-ready border-radius CSS. All processing is local and private.
How to Use Border Radius Generator
Adjust Corner Values
Use the sliders to set the border radius for each corner individually, or toggle "Uniform" to set the same value for all four corners at once. Values are in pixels.
View the Preview
The preview box shows exactly how the rounded corners will look. The box has a blue background so you can clearly see the border radius effect against the page background.
Copy the CSS
The generated border-radius CSS updates in real-time. Copy the shorthand or individual corner values directly into your stylesheet. The shorthand format shows all four values (top-left, top-right, bottom-right, bottom-left).
Frequently Asked Questions
What does border-radius do?
border-radius rounds the corners of an element. Each corner can have a different radius. The shorthand order is: top-left, top-right, bottom-right, bottom-left — clockwise from top-left. A single value applies to all four corners. Two values set top-left/bottom-right and top-right/bottom-left alternately. border-radius: 8px gives all corners 8px rounding. border-radius: 50% makes a perfect circle (on a square element).
Can I create elliptical corners?
Yes, CSS border-radius supports elliptical corners using a slash: border-radius: 20px / 10px creates corners with 20px horizontal radius and 10px vertical radius. Each corner can have different horizontal and vertical radii, creating asymmetrical curves. Our tool generates standard circular corners — for elliptical corners, manually use the slash syntax.
What is the difference between border-radius and clip-path?
border-radius only rounds the corners of the element box — the element remains rectangular with curved corners. clip-path can create arbitrary shapes (circles, polygons, custom paths) by clipping the element to that shape. border-radius preserves the element box model and layout; clip-path changes the visible shape but the original box (and its margins/padding) stays the same. Use border-radius for rounded corners and clip-path for custom shapes.
Does border-radius work on images?
Yes. Apply border-radius directly to an img element to round its corners. For a circular avatar, use border-radius: 50% on a square image. For images inside containers, apply overflow: hidden to the container along with border-radius — the image gets clipped to the rounded shape. This is the standard technique for circular user avatars and rounded image thumbnails.
Border Radius Design Tips
Rounded corners soften visual design. The right radius makes buttons feel clickable, cards feel contained, and images feel polished.
- Buttons: 6-12px radius for standard buttons. Fully rounded (24px+) for pill-shaped buttons.
- Cards: 8-16px radius for content cards. Larger cards can use larger radii.
- Avatars: 50% for circular avatars. Use on a square img element for a perfect circle.
- Input fields: 4-8px radius for text inputs. Matches most design systems.
- Modals: 12-20px radius for modal dialogs. Creates visual distinction from the page.