CSS Border Radius Generator
Round corners easily. Create organic shapes by adjusting the border-radius for each corner independently.
Last updated: 2026-01-11
Corner Controls
Live Preview
border-radius: 10px 10px 10px 10px;Key Features
- Individual Control: Adjust Top-Left, Top-Right, Bottom-Right, and Bottom-Left corners separately.
- Live Preview: See your shape transform in real-time.
- Shortcode Generation: Automatically generates the 4-value CSS syntax.
- Reset Button: Quickly return to a square shape.
How to Use This Border Radius Generator
- Drag the sliders to round specific corners of the box.
- Move all sliders to 0 to create a sharp square.
- Move all sliders to 100px (assuming the box is 200px) to create a perfect circle.
- Click Copy to get the CSS code.
Why Use Use a Border Radius Generator?
Memorizing which value corresponds to which corner in the 4-value syntax can be confusing. This tool visualizes the changes instantly, allowing you to create complex organic shapes (like leaves or blobs) without mental math. Instead of repeatedly editing your stylesheet, refreshing the browser, and squinting at the result, you get instant visual feedback as you drag each slider, which makes it far faster to land on the exact silhouette you want for a card, button, avatar, or hero image.
Common Use Cases
- Rounding product card corners in a design system so every component shares a consistent radius scale.
- Creating blob-shaped decorative backgrounds or hero illustrations that feel organic rather than geometric.
- Turning a square profile photo into a circular avatar by setting all four corners to 50%.
- Building speech-bubble or chat-message shapes where only some corners should be rounded.
- Prototyping neumorphic or soft-UI components where subtle, uneven rounding adds depth.
Tips for Better Results
- Keep radius values proportional to the element size â a 20px radius looks dramatic on a 40px icon but barely noticeable on a 400px banner.
- For a consistent design system, stick to a small scale of radius tokens (e.g., 4px, 8px, 16px, 999px) rather than arbitrary one-off values.
- Combine border-radius with overflow: hidden on a parent element to clip child content (like an image) to the rounded shape.
- Test your shape at different box dimensions â a radius that looks like a subtle curve on a wide rectangle can look like a full circle once the box becomes square.
Frequently Asked Questions
What is the order of the 4 values?
The standard order is: `Top-Left`, `Top-Right`, `Bottom-Right`, `Bottom-Left` (clockwise starting from top-left).
Can I use percentage values?
Yes, CSS supports percentages (e.g., `50%` to make a circle). This generator outputs pixel values for precision, but you can manually change `px` to `%` in your code.
How do I make a pill shape?
Set a very high border-radius (e.g., 999px) on all corners. The browser will cap it at the maximum possible roundness for the pill effect.
Does this work on images?
Yes, adding `border-radius` to an `img` tag will round its corners or clip it into a circle.
Why does one corner look sharp even with a radius set?
Check that the box is large enough for the radius value â if two adjacent radii exceed the length of the shared edge, browsers scale all radii down proportionally, which can make a corner look sharper than expected.
Is `border-radius` supported in all browsers?
Yes, `border-radius` has been supported unprefixed in every major browser (Chrome, Firefox, Safari, Edge) for over a decade, so no vendor prefixes or fallbacks are needed.
Can each corner use two different radii for an elliptical curve?
Yes. CSS border-radius supports a slash syntax, such as `border-radius: 50px / 25px`, where the value before the slash sets the horizontal radius and the value after sets the vertical radius, letting you draw elongated, elliptical corners instead of perfect circular arcs.
Does border-radius affect the background color or border, or just the outline shape?
It clips the entire box, including the background color, background image, border stroke, and box-shadow, to the rounded outline. Any child content that overflows the box is only clipped if you also set overflow: hidden on the same element.