Border Radius Generator
Create CSS border-radius shapes with a live preview and per-corner control, then copy the CSS. Free and in-browser.
border-radius: 24%;How to use the Border Radius Generator
- 1Open the tool and use the linked slider (or single input) to set one radius applied to all four corners, watching the live preview box update instantly.
- 2Toggle off the link/uniform mode to unlock per-corner control, then set top-left, top-right, bottom-right and bottom-left radii independently.
- 3Switch the unit between px and % (and, if you need asymmetric corners, enable the two-value elliptical mode to set separate horizontal and vertical radii).
- 4Fine-tune while watching the preview until the shape matches what you want, resizing the preview element if you want to test how percentage values behave.
- 5Read the generated border-radius CSS in the output box, then click Copy to put it on your clipboard.
- 6Paste the copied rule into your stylesheet or component class.
About the Border Radius Generator
Border Radius Generator is a browser-based tool for crafting rounded-corner shapes in CSS and copying the exact code into your stylesheet. Instead of guessing pixel values and reloading your project to check the result, you drag sliders or type values and watch a live preview box reshape itself in real time. The tool exposes full per-corner control: you can round only the top-left and bottom-right corners, give each corner a different radius, or switch to the two-value elliptical syntax (horizontal / vertical) to produce asymmetric, egg-like or leaf shapes that a single radius value cannot express. It generates the modern shorthand border-radius property and, where you split corners, the longhand form so the output stays clean and readable.
Everything runs entirely in your browser using client-side JavaScript. Nothing you type is ever uploaded to a server, there is no account, and the generator works offline once the page has loaded. That makes it safe for prototyping component styling on internal or confidential projects.
Real-world uses are everywhere in front-end work: rounding buttons and cards, building pill-shaped tags (set the radius to 9999px for a perfect capsule), softening image thumbnails and avatars (50% turns a square into a circle), and designing blob backgrounds or decorative hero shapes with mixed elliptical corners. Designers use it to communicate exact radii to developers; developers use it to skip trial-and-error in the browser dev tools.
A few practical tips: percentages scale with the element's size while pixels stay fixed, so use % for avatars that must stay circular at any dimension and px for consistent button corners across a design system. If a corner looks flat, remember each corner's radius is capped by the element's width and height. For the classic squircle look, keep all four radii equal and moderate rather than maxed out. Once the preview matches your intent, copy the generated CSS and paste it straight into your class. It matters because border-radius is one of the most frequently tweaked properties in any UI, and getting it right visually beats memorizing syntax.
Frequently asked questions
What is the difference between using px and % for border-radius here?
Pixel values are fixed, so a 12px corner looks identical no matter how large the element gets, which is ideal for buttons and cards in a design system. Percentage values are relative to the element's own width and height, so 50% always yields a circle or ellipse regardless of size, which is what you want for avatars and circular icons. The tool lets you switch units so you can preview both behaviors.
How do I make a perfect circle or a pill shape?
For a circle, use a square element and set all four corners to 50%. For a pill or capsule button, set the radius to a very large value such as 9999px (or 50% on a wider-than-tall box); the corners cap at half the shorter side and produce fully rounded ends. The preview shows both instantly.
Why does my corner look flat even though I set a large radius?
Each corner's radius is limited by the element's dimensions. If two adjacent corners' radii add up to more than the width or height, the browser scales them down proportionally, which can make a corner appear flatter than the number suggests. Reduce the radius or increase the element size to see the full curve.
What are the two values per corner (elliptical radius) for?
The full border-radius syntax lets each corner have a horizontal and a vertical radius, written as horizontal / vertical. Setting them unequal produces an elliptical, stretched curve instead of a quarter-circle, which is how you create asymmetric blob shapes, leaf shapes and organic UI decorations. Enable the elliptical mode to expose both fields per corner.
Is my input sent anywhere, and does it work offline?
No input is sent anywhere. The generator runs completely in your browser with client-side JavaScript, so the radius values and generated CSS never leave your device and there is no server processing. Once the page has loaded it keeps working without a connection, which makes it safe for confidential or internal projects.
Related tools
Browse all free online tools in Generators and more.
Frequently asked questions
Per-corner control?+
Yes — set each corner independently or all at once, with a live preview.