Border-Radius Generator

What this tool does

The Border-Radius Generator builds a CSS border-radius declaration visually, so you can shape a box by dragging sliders instead of guessing numbers. Each of the four corners — top-left, top-right, bottom-right and bottom-left — has its own control, and you can switch on elliptical corners to give every corner a separate horizontal and vertical radius. A live preview box updates on every change, and the generated declaration is shown as copyable code. Everything is computed locally in your browser; there is no upload and no account.

CSS rounding is deceptively rich. Beyond the familiar single value, the property accepts up to eight numbers in the a b c d / e f g h form, where the first group sets horizontal radii and the second sets vertical radii. Writing that by hand is error-prone — this tool keeps the syntax correct and always emits the shortest valid version of what you have drawn.

Use cases

In everyday web design, rounded corners soften cards, buttons, inputs and modals; a consistent radius scale is part of most design systems, and this generator lets you dial in and copy each step. For branding work, a distinctive corner treatment — say, one sharp corner and three round ones — can become a recognisable motif across a product. Elliptical corners are the basis of organic “blob” shapes and squircle-style app tiles. Accessibility-minded teams use generous radii to make tap targets feel friendlier on touch screens, while illustrators and prototypers reach for the 50% trick to turn any image into a circular avatar without cropping.

How to use it

1. Choose a unit — px for a fixed radius or % for one that scales with the box. Switching units rescales any value that would exceed the new range.
2. Leave Link all corners on to round every corner equally, or turn it off to style each corner on its own.
3. Turn on Elliptical corners when you want separate horizontal and vertical radii; each corner then shows two sliders.
4. Drag the corner sliders and watch the preview box update in real time.
5. When the shape looks right, click Copy CSS to copy the full border-radius declaration, ready to paste into a stylesheet.
6. Use Reset to return every control to its defaults.

Tips

For a pill-shaped button, set a very large pixel radius such as 999px; the browser clamps the rounding to half the box height, giving fully round ends at any width. For a circle, switch to % and set all four corners to 50%. To build a soft, organic blob, enable elliptical corners and give each corner a different horizontal/vertical pair — small asymmetries read as hand-drawn. When you only want one corner squared off, unlink the corners and drop that single value to zero; it is a quick way to make a card point toward an adjacent element. Keep a small set of radius values across a project rather than picking arbitrary numbers — three or four steps usually cover everything and keep the interface coherent.

Related techniques

border-radius pairs naturally with box-shadow for raised cards and with overflow: hidden when you need child content — like an image — clipped to the rounded shape. For shapes the rectangle model cannot express, such as triangles or polygons, look at the Clip-Path Generator and the CSS Triangle Generator. If you are assembling a full design system, combine this with a colour converter and palette tools so corner radius, colour and spacing are all defined in one consistent place. Because the output is plain CSS, it drops into any framework — vanilla stylesheets, Tailwind’s arbitrary values, CSS-in-JS or a preprocessor — without changes.