Border Radius Generator
Create CSS border-radius visually
border-radius: 16px;The Border Radius Generator offers an interactive visual editor for CSS border-radius, letting you transform rectangular elements into circles, ovals, pills, organic blobs, and everything in between. Control each corner independently or link them for uniform adjustment, and use built-in presets for common shapes. Ideal for styling buttons, cards, avatars, tags, and any UI component that benefits from rounded corners.
๐ How to Use
- Adjust each corner radius individually
- Use link corners to adjust all at once
- Apply presets for quick styling
- Copy the CSS code
โจ Features
- โIndividual corner control
- โLink corners option
- โVarious presets
- โReal-time preview
- โAutomatic CSS code generation
๐ก Use Cases
- โขUI Designer: Define consistent border-radius values for design system components like buttons, cards, and input fields.
- โขFrontend Developer: Quickly style user avatars as circles and tag elements as pills without manual CSS calculations.
- โขWeb Publisher: Compare various corner radius combinations in real time to find the optimal look for your layout.
- โขCSS Artist: Create unique organic blob shapes using asymmetric border-radius values for creative layouts.
- โขDesign Learner: Visually understand the difference between shorthand (4 values) and full (8 values with slash) border-radius syntax.
๐ฏ Tips
- โธSet 50% to turn a square into a circle or a rectangle into an oval.
- โธFor pill-shaped buttons, set border-radius to half the element height (e.g., 20px for a 40px tall button).
- โธCreate organic blob shapes by entering different large values for each corner, such as 30% 70% 70% 30% / 30% 30% 70% 70%.
- โธA border-radius of 8-16px gives cards a modern, friendly appearance that works well in most design systems.
- โธUse overflow: hidden on the container element to ensure child content follows the rounded corners.
โ FAQ
Q. How do I make a perfect circle?
A. Enter 50% to make a square element into a circle.
Q. How do I create blob shapes?
A. Use different values for each corner to create organic blob shapes. Check the presets for examples.
Q. What does the slash (/) mean in border-radius?
A. Values before the slash define horizontal radii, and values after define vertical radii. For example, border-radius: 50% 50% / 60% 40% creates an elliptical shape with different horizontal and vertical roundness.
Q. What is the difference between border-radius and clip-path?
A. border-radius is optimized for rounding corners, while clip-path can create complex shapes like triangles and polygons. For rounded corners, border-radius offers better performance and simpler syntax.
Q. Can I apply border-radius to images?
A. Yes, apply border-radius directly to the img tag, or set border-radius with overflow: hidden on a container div to crop images into circles or rounded rectangles.
Q. What is the difference between px and % for border-radius?
A. px creates a fixed-size rounding, while % is proportional to the element dimensions. Use % for responsive designs where the rounding should scale with the element size.