A CSS border radius generator lets you visually design rounded corners for HTML elements without writing code manually. Border radius shapes buttons, cards, avatars, and every UI component — from subtle 4px rounded cards to full circles and organic blob shapes. Adjust each corner independently, use the advanced elliptical mode, and export production-ready CSS instantly.
Corner Controls
Presets
Live Preview
CSS Output
border-radius: 12px;
How to Use the CSS Border Radius Generator
The CSS border-radius property is one of the most-used CSS properties — it shapes every button, card, avatar, and badge on the web. Writing precise values by hand is tedious. This free CSS border radius generator gives you visual sliders, a live preview, presets, and one-click CSS export so you can design perfect corners in seconds.
Step 1: Adjust Individual Corners
Use the four corner sliders to set the radius for each corner independently: top-left, top-right, bottom-right, and bottom-left. The live preview box on the right updates in real time so you can see exactly how the shape changes. Use the corner diagram to understand which slider affects which corner.
Step 2: Link All Corners for Uniform Rounding
Enable the Link corners toggle to sync all four corners together. Moving any slider will update all corners simultaneously — ideal for creating uniform rounding on cards and buttons. When linked is off, each corner slider operates independently for asymmetric shapes.
Step 3: Use Presets for Common Shapes
Choose from five built-in presets: Pill (fully rounded sides, great for tags and buttons), Circle (50% for perfect round avatars), Leaf (asymmetric rounded corners), Blob (organic rounded shape), and Drop (teardrop shape). Click any preset to load its corner values, then fine-tune with the sliders.
Step 4: Enable Advanced Elliptical Mode
Toggle Advanced mode to access the CSS 8-value elliptical syntax. Each corner gets separate horizontal and vertical radius controls. For example, a top-left corner with 60px horizontal and 20px vertical radius creates an elliptical arc instead of a circular one. This unlocks organic blob shapes and creative layouts that are impossible with the standard 4-value syntax.
Step 5: Copy and Use Your CSS
Click Copy CSS to copy the complete border-radius property to your clipboard. The output is production-ready CSS that works in all modern browsers — paste it directly into your stylesheet, Tailwind config, or inline style attribute.
FAQ
Is this CSS border radius generator free?
Yes, completely free with no limits or account required. All calculations and previews run locally in your browser — no data is sent anywhere.
What is the CSS border-radius property?
The CSS border-radius property rounds the corners of an element's border. You can set a single value to round all four corners equally, or set different values for each corner individually. It accepts pixel values, percentages, and em units.
How do I create a circle with CSS border-radius?
Set border-radius to 50% on an element with equal width and height. The Circle preset in this tool does this automatically. For example: border-radius: 50%; on a 200px × 200px div creates a perfect circle.
What is the difference between border-radius shorthand and individual corner properties?
The shorthand border-radius sets all four corners at once (top-left, top-right, bottom-right, bottom-left in clockwise order). Individual properties like border-top-left-radius let you set each corner independently with full control.
What does the 8-value border-radius syntax do?
The advanced 8-value syntax sets both horizontal and vertical radii for each corner: border-radius: Xh Xh Xh Xh / Xv Xv Xv Xv. This creates elliptical corners where the curve is different horizontally and vertically, enabling organic blob-like shapes.
How do I make a pill-shaped button with CSS?
Set border-radius to a large pixel value (like 9999px) or 50%. The Pill preset in this tool applies this automatically. This works on any button or element regardless of its width.
Can I use border-radius with percentage values?
Yes. A percentage value is relative to the element's dimensions. border-radius: 50% creates an ellipse or circle. Using different horizontal and vertical percentages creates organic egg or leaf shapes.
How do I copy the generated CSS?
Click the Copy CSS button below the code output. The complete border-radius property is copied to your clipboard as production-ready CSS that works in all modern browsers.