About the Border Radius Generator
This border radius generator gives each corner its own slider, so you can round a shape asymmetrically instead of guessing at four values in a text editor. Drag Top left, Top right, Bottom right and Bottom left anywhere from 0 to 150 pixels, choose a fill colour, and add a border up to 12 pixels thick. The preview box redraws on every movement, and the CSS panel below writes the shorthand for you — collapsing to a single value when all four corners match, and expanding to the full four-value form when they do not.
How to use the Border Radius Generator
- 1
Drag the four corner sliders — Top left, Top right, Bottom right and Bottom left — to shape the outline.
- 2
Pick a Fill colour so the curve is visible against the page.
- 3
Raise the Border width slider if you want an outline; the tool derives a darker shade of the fill for it automatically.
- 4
Watch the live preview, then copy the CSS block underneath into your stylesheet.
What people use it for
Speech bubbles and chat messages
Chat interfaces usually round three corners fully and leave the fourth square where the bubble points at its sender. Set three sliders to 18 and one to 4 to get that shape exactly.
Pill buttons and tags
Push every corner to 150px on a short element and the radius clamps to half the height, giving a perfect pill regardless of how long the label turns out to be.
Cards with a shaped bottom edge
Leaving the top corners square and rounding the bottom two makes a card read as sitting under a full-bleed image without any extra clipping rules.
Blob shapes for decorative panels
Four very different values produce an organic asymmetric outline that works well behind a testimonial or an illustration.
How the border-radius shorthand is ordered
The shorthand takes one to four values and runs clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. With one value all four corners share it. With two, the first applies to top-left and bottom-right while the second takes top-right and bottom-left. With three, the second value covers both the top-right and bottom-left corners. Beyond that lies a form this tool does not emit but which is worth knowing: a slash separates horizontal from vertical radii, so border-radius: 50px / 20px gives every corner a 50-pixel horizontal radius and a 20-pixel vertical one, producing elliptical rather than circular curves. Each corner can carry its own pair, giving up to eight numbers in one declaration. Longhand properties exist too — border-top-left-radius and its three siblings — which are useful when a media query or a state needs to change only one corner without restating the rest.
Pixels, percentages and what the browser does when values are too large
A pixel radius keeps the same curve at every element size, which is what you want for buttons and cards that must look consistent across breakpoints. A percentage resolves against the element's own dimensions — horizontal radii against the width, vertical against the height — so 50 percent on a square gives a circle and on a rectangle gives an ellipse. Values larger than the element can accommodate are not an error. The CSS specification defines a reduction step: the browser finds the smallest ratio f such that the sum of adjacent radii along any edge does not exceed that edge's length, then scales every radius by f. This is why 9999px reliably produces a pill rather than breaking, and why two large adjacent radii shrink together in proportion rather than one winning. Backgrounds and borders are clipped to the rounded shape automatically, but overflowing children are not; add overflow: hidden to the rounded parent when an image inside must follow the curve.
Tips
- Nest a rounded element inside another and make the inner radius the outer radius minus the padding, or the curves will look concentric-but-wrong.
- Use a slightly larger radius on larger surfaces — a 4px radius that looks right on a chip looks mean on a full-width card.
- Add overflow: hidden alongside the radius whenever the element contains an image or a video.