Border Radius Generator: Create CSS Border Radius Values Online
Create CSS border-radius values visually — from simple rounded corners to complex elliptical and asymmetric shapes — with instant code output.
Try the free online tool
Runs entirely in your browser — no signup, no uploads.
Rounded corners are one of the most common design patterns in modern user interfaces, yet the CSS border-radius property is far more powerful — and more complex — than most developers realize. Beyond simple uniform rounding, border-radius lets you create elliptical corners, asymmetric shapes, pill buttons, circles, and organic blob-like forms using its rarely-used slash notation that controls horizontal and vertical radii independently.
Our Border Radius Generator exposes the full power of the property through a visual editor with eight independent corner handles. Drag any corner to set its radius, or unlock the horizontal and vertical radii of each corner to create elliptical shapes. A linked mode keeps all corners synchronized for uniform rounding, while free mode lets each corner have its own value.
The live preview shows your shape against a contrasting background with realistic content inside — text and an image — so you can judge whether the rounding looks correct in context rather than in isolation. The output includes the full CSS declaration in both shorthand and longhand forms.
What Is the CSS border-radius Property?
The CSS border-radius property rounds the corners of an element's outer border edge. It is a shorthand for four individual corner properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Each corner can have an independent radius value.
What makes border-radius particularly powerful is its slash notation. Writing border-radius: 50px / 20px sets all corners to a horizontal radius of 50px and a vertical radius of 20px, creating elliptical corners. Writing border-radius: 50% creates a perfect circle or ellipse depending on the element's aspect ratio. Combining different values for each corner with the slash notation enables complex organic shapes.
Border-radius values can be specified in pixels (px) for absolute rounding, percentages (%) for rounding proportional to the element's dimensions, or rem/em units for scalable rounding that responds to the root font size.
How to Use This Tool
Create your border-radius shape with the visual editor:
- 1
Set the Overall Rounding
Drag the main slider for quick uniform rounding, or type a value directly. This is the fastest way to get standard rounded corners for cards and buttons.
- 2
Adjust Individual Corners
Click 'Unlock Corners' to control each corner independently. Four sliders appear — one per corner — each starting at the current uniform value.
- 3
Enable Elliptical Corners
Toggle 'Elliptical Mode' on any corner to reveal separate horizontal and vertical radius controls. Drag them independently to create asymmetric elliptical corners.
- 4
Preview in Context
The preview element shows your shape with text content and a background image so you can evaluate how the rounding interacts with real content.
- 5
Copy the CSS
Click Copy to get the CSS shorthand. Toggle between shorthand output (border-radius: 10px 20px 15px 5px / 5px 10px 20px 15px) and longhand output (four individual property declarations).
Common Use Cases
Border-radius is used throughout interface design for a wide variety of shapes:
- Creating pill-shaped buttons and tags by setting border-radius to a value larger than half the element's height, such as border-radius: 9999px
- Rounding card components with a consistent corner radius that matches the design system, typically 8px, 12px, or 16px depending on the card's size
- Making circular avatar and icon containers by setting border-radius: 50% on a square element
- Building blob or organic shapes for hero sections and decorative backgrounds using the full elliptical corner syntax with varied per-corner values
- Creating chat bubble shapes with one corner fully squared (0px) and the others rounded, indicating the message origin corner
Tips and Best Practices
Apply border-radius thoughtfully to maintain a coherent, professional design:
- Maintain a consistent corner radius scale across your design system — for example, 4px for small elements, 8px for medium, 12px for large — to create visual harmony
- Use border-radius: 9999px instead of 50% for pill shapes on elements with variable width, as 50% creates an ellipse on wide elements rather than a true pill
- Be aware that border-radius clips the element's background but not its children by default — add overflow: hidden if you need child elements to also be clipped to the rounded shape
- When combining border-radius with box-shadow, note that the shadow follows the rounded outline, so sharp shadow spread values may reveal the underlying rectangular shape at the corners
- Test border-radius values on different screen sizes if using percentage-based values, as the visual size of the rounding changes with the element's rendered dimensions
Frequently Asked Questions
How do I create a perfect circle with CSS?
Apply border-radius: 50% to a square element (equal width and height). This sets the corner radii to 50% of the element's dimensions in each direction, creating a perfect ellipse that, on a square element, is a circle. Ensure the element has explicit width and height set.
What does the slash notation in border-radius do?
The slash in border-radius separates horizontal radii from vertical radii for each corner. border-radius: 30px 20px / 20px 30px sets the top-left corner to a 30px horizontal radius and 20px vertical radius, and the other corners accordingly. This creates elliptical rather than circular corner shapes.
Can I animate border-radius?
Yes. border-radius values are numeric and can be transitioned and animated. A smooth transition between a square (border-radius: 0) and a circle (border-radius: 50%) is a common interactive effect. Keep animations short (under 300ms) to avoid visual distraction.
Does border-radius affect the clickable area of an element?
No. The clickable area (hit testing) follows the rectangular bounding box of the element, not its visible rounded shape. Clicks in the 'cut off' corner areas outside the visible rounded shape still register on the element. To change click behavior, you would need to use SVG or a clip-path approach.
Why does border-radius not work on my table elements?
Table elements require border-collapse: separate (the default) for border-radius to work. If border-collapse: collapse is set, border-radius has no effect on individual cells. Apply border-radius to a wrapping div around the table and control overflow with overflow: hidden.
How do I round only the top corners of an element?
Use the longhand properties: border-top-left-radius: 8px; border-top-right-radius: 8px. Or use the shorthand with the correct value order: border-radius: 8px 8px 0 0 — which maps to top-left, top-right, bottom-right, bottom-left in clockwise order.
Can border-radius create triangle or other sharp shapes?
No. border-radius only creates rounded curves. For triangles and other angular shapes, use the CSS border trick, the clip-path property, or SVG. clip-path: polygon() is the most flexible and modern approach for arbitrary polygon shapes.
Ready to use this tool?
Free, instant, no account required. Runs entirely in your browser.