Use the free CSS Border Radius Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What Border Radius Does
Border radius rounds the corners of a box. That sounds trivial, but corner radius is one of the strongest signals of a design’s personality. Sharp corners feel precise, technical, and formal. Slightly rounded corners feel friendly and modern. Fully rounded corners feel playful and casual, which is why pill-shaped buttons dominate consumer apps. Changing a radius by a few pixels changes how a whole interface feels, even though users rarely notice the number itself.
The property takes up to four values, one per corner, in the order top-left, top-right, bottom-right, bottom-left: clockwise from the top-left. One value rounds all four corners equally. Two values pair opposite corners. Four values give full control. There is also an elliptical form, with a slash separating horizontal radii from vertical radii, which produces corners shaped like quarter-ellipses instead of quarter-circles.
How to Use the Tool
Start with all corners equal, which covers most designs, and drag the slider until the preview looks right. Untick that option to set each corner separately, which is how you build shapes like a card rounded only at the top, or a chat bubble with one square corner. Tick elliptical mode when you want a corner that is wider than it is tall, or taller than it is wide, and set the vertical radius separately.
The preview updates live, and the CSS output follows. Copy it into your stylesheet as a single border-radius line. The tool’s maximum of 150 pixels covers everything up to fully pill-shaped boxes at typical sizes.
Choosing a Radius
Radius should relate to the size of the element. A 4-pixel radius on a small button reads as slightly softened; the same 4 pixels on a large card is nearly invisible. A common system is to scale radius with size: 4 to 6 pixels for buttons and inputs, 8 to 12 for cards, 16 to 24 for large panels and modals. When in doubt, match the radius to the element’s padding or to nearby elements, because consistent radii look intentional and mismatched ones look accidental.
Full rounding deserves a rule of its own: a pill shape happens when the radius is at least half the element’s height. For a 40-pixel-tall button, 20 pixels gives a perfect pill. Setting a huge radius like 999 pixels is a popular shortcut that guarantees a pill at any height, and it is harmless, though a precise value documents your intent better.
Individual Corners
Rounding only some corners creates shapes with clear uses. A card that sits at the top of a page often rounds only its top corners, because its bottom edge meets the content below. A tab rounds only its top corners for the same reason. Chat bubbles famously leave one corner square to suggest a tail pointing at the speaker. Image captions that overlap a photo round only the corners that face away from the image.
When you set corners individually, keep the order straight: top-left, top-right, bottom-right, bottom-left. Mixing up the order is the most common border-radius bug, and it shows up as a shape that looks mirrored from what you intended. The tool labels each slider so you set the corner you mean.
Elliptical Corners
Elliptical corners use two radii per corner: a horizontal radius and a vertical radius, separated by a slash. The first group of four values is horizontal, the second group is vertical. An elliptical corner that is wide and short, like 40 pixels horizontal and 10 vertical, gives a gentle slope along the top edge and a quick curve down the side. This shape appears in organic designs, blob shapes, and decorative headers where a circular corner would look too plain.
Elliptical corners also power the “blob” look: different radii on all eight values produce an irregular organic shape that still comes from one property. Designers use blobs for avatars, badges, and decorative panels. The effect is striking but easy to overdo; one blob as an accent works, a page of blobs looks chaotic.
Radius and Other Properties
Border radius interacts with other properties in ways that surprise beginners. A border follows the rounded corner, which is why bordered cards look right with radius. An outline, by contrast, stays rectangular in older browsers, so a focused button with a big radius can show a square outline around a round button; modern browsers now follow the radius for outlines too, but test if you support older ones.
Overflow also matters. A child element, like an image at the top of a card, will poke out past rounded corners unless the parent has overflow hidden. This is the most common “my radius is not working” complaint, and the fix is one line on the parent. Backgrounds, shadows, and gradients all follow the rounded shape automatically, so the corner treatment stays consistent across the element’s whole appearance.
Mistakes to Avoid
The main mistake is inconsistency: five different radii across a page with no system behind them. Pick two or three values, assign them to element sizes, and reuse them. Another mistake is rounding everything, including tables and data-dense panels, where sharp corners aid scanning and rounded corners waste space. Finally, remember that radius is a visual treatment, not a layout tool: it never changes an element’s size or position, only how its corners are drawn.