CSS Border Radius Generator
CSS Border Radius Generator is a free online tool that helps you create perfectly rounded corners for your HTML elements visually. Instead of guessing pixel values, use interactive controls to adjust each corner independently or link them together for uniform rounding. The tool supports both pixel and percentage units, offers preset shapes (circle, ellipse, leaf, talk bubble), and shows a live preview of your element as you adjust. Copy the generated CSS border-radius property with all vendor prefixes instantly. Perfect for creating modern card UIs, circular avatars, pill-shaped buttons, and creative geometric shapes.
What Is
The CSS border-radius property rounds the corners of an element's outer border edge. It's one of the most commonly used CSS properties for creating visually appealing, modern interfaces. The border-radius property can take 1 to 8 values: - Single value: border-radius: 10px (all four corners the same) - Two values: border-radius: 10px 20px (top-left/bottom-right, top-right/bottom-left) - Three values: border-radius: 10px 20px 30px (top-left, top-right/bottom-left, bottom-right) - Four values: border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left — clockwise) - Eight values (ellipse): border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px (horizontal / vertical radii for elliptical corners) Shorthand vs. longhand: - Border-radius: 10px (shorthand, all four corners) - border-top-left-radius: 10px (individual corner) - border-top-right-radius: 20px - border-bottom-right-radius: 30px - border-bottom-left-radius: 40px Percentage vs. pixel values: - border-radius: 50% (creates a circle/ellipse relative to the element's dimensions) - border-radius: 10px (fixed pixel value, doesn't scale with element size) - For circles, use 50% on a square element - For pill shapes, use 9999px or 50% on rectangular elements Common use cases: - Circular images/avatars: 50% - Pill-shaped buttons: 9999px or 25% of height - Card corners: 8-16px - Dialog modals: 8-12px - Leaf/leaf-like shapes: asymmetric radius values The interactive preview adjusts as you modify corner values, helping you visualize the effect instantly.
How to Use
- Choose your adjustment mode: link all corners for uniform rounding or unlink to adjust each corner independently. The tool shows a visual representation of all four corners (top-left, top-right, bottom-right, bottom-left).
- Drag the sliders or enter pixel values to adjust the corner radius. Watch the preview element update in real-time as you change values. Use percentage mode for responsive or shape-relative rounding.
- Enable the ellipse mode (advanced) to set different horizontal and vertical radii for each corner, creating elliptical rather than circular corners. This allows organic, blob-like shapes.
- Try preset shapes from the gallery: circle, ellipse, leaf, flower, talk blob, tab shape, and more. Clicking a preset instantly applies the corresponding border-radius values to the preview.
- Compare original vs. rounded by toggling the preview between sharp-cornered and rounded states. This helps you see the exact transformation your CSS will produce.
- Copy the border-radius CSS code from the output panel. Both the shorthand (e.g., border-radius: 10px 20px;) and individual properties (border-top-left-radius: etc.) are provided.
Examples
Input: TL:20px TR:20px BL:0 BR:0
Process: Apply asymmetric radius to corners
Result: border-radius: 20px 20px 0 0;
Input: All: 50%
Process: 50% on all corners creates circle/ellipse
Result: border-radius: 50%; (Creates circle)
Related Searches
People also search for: border radius generator, css border radius, rounded corners, border radius.
border radius generatorcss border radiusrounded cornersborder radius
Frequently Asked Questions
How do I create a perfect circle?
To create a perfect circle, the element must be a square (equal width and height), and set border-radius: 50%. For a 200x200px avatar, use width: 200px; height: 200px; border-radius: 50%;. If the element isn't square, 50% creates an ellipse instead of a circle. For responsive circles without fixed dimensions, use aspect-ratio: 1; with width and border-radius: 50%.
What is the maximum border-radius value?
There is no strict maximum value for border-radius in CSS. Values larger than half the element's size simply create a full rounding effect. For pill-shaped buttons, common practice is to use a very large value like 9999px or 9999em—this guarantees fully rounded sides regardless of the element's height. Using 50% creates elliptical corners (half width, half height of radius) while 9999px creates more circular half-caps.
Can I animate border-radius with CSS transitions?
Yes, border-radius is animatable. You can smoothly transition between different border-radius values: .element { border-radius: 0; transition: border-radius 0.3s ease; } .element:hover { border-radius: 20px; }. This creates smooth morphing effects on hover or class changes. Animating between percentage and pixel values works in modern browsers, though the interpolation may not always be perfectly smooth.
Why doesn't border-radius work on my table or image?
border-radius requires overflow: hidden (on the parent) or proper display properties to be visible on certain elements. For images, the border-radius clips the image content. For tables, you may need border-collapse: separate; for border-radius to work on table cells. If the rounded corners aren't visible, check if the element has overflow:hidden applied somewhere clipping the effect, or if border-radius is being overridden by more specific CSS selectors.
How do I create a leaf or organic blob shape?
For leaf shapes, use asymmetric border-radius values where opposite corners have very different radii (e.g., border-radius: 0 100px 0 100px for a horizontal leaf). For organic blob shapes, use the 8-value ellipse syntax with varying horizontal/vertical radii (e.g., border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). CSS can create smooth blob shapes—combine with animation for interactive blob effects.