CSS Border Radius Generator
Round each corner independently or link them together, and copy the shorthand border-radius CSS.
About the Border Radius Generator
Border-radius accepts a value for each of the four corners in top-left, top-right, bottom-right, bottom-left order, which is exactly what the four inputs above control. When all four corners share the same value the tool collapses the output to a single number, matching how the shorthand is normally written in real stylesheets instead of repeating the same figure four times. Turn on "Link all corners" while dragging to keep a shape symmetrical, or turn it off to build lopsided blobs and speech-bubble style corners.
Why the corner order is top-left first, not top first
Most CSS box-model shorthands, margin, padding, border-width, go clockwise starting from the top edge: top, right, bottom, left. border-radius is different because it describes corners, not edges, so it goes clockwise starting from the top-left corner instead: top-left, top-right, bottom-right, bottom-left. This tool's four number inputs are laid out and wired in exactly that spec order, so the raw CSS this generates, border-radius: 20px 20px 20px 20px, always matches what you'd hand-write.
What "Link all corners" actually does
The checkbox doesn't just freeze the current values, it actively re-syncs. The moment you check it, all four corner inputs are immediately set to whatever the top-left field currently holds, discarding any existing asymmetry. From then on, changing any one linked corner's number pushes that same value into the other three on every keystroke or drag. Uncheck it and the four corners become independent again, letting you build asymmetric shapes like a chat-bubble tail (one corner at 0, the rest rounded) or a leaf shape (opposite corners rounded, opposite corners square).
A real limitation: no elliptical corners
The full CSS border-radius spec actually allows two radius values per corner, separated by a slash, like border-radius: 10px 20px 10px 20px / 20px 10px 20px 10px, where the first set controls horizontal curvature and the second controls vertical curvature independently. That's what produces true egg or leaf shapes rather than simple circular-arc corners. This generator only outputs one radius per corner (a circular arc), so if you need an elliptical corner shape, you'll need to hand-edit the generated CSS to add the slash-separated vertical radius set yourself.
Why there's no percentage option
The inputs are capped at 300px and always emit a pixel value, never a percentage. Percentage-based border-radius (most famously border-radius: 50% to turn any square element into a perfect circle, or any rectangle into a pill/ellipse) scales automatically with the element's own width and height, which is extremely useful for responsive avatars and buttons. Because this tool works from a fixed-size preview box, it can only show you the pixel-equivalent result at that one size, if your real element resizes, a percentage value in your actual CSS will track that resize far better than a fixed pixel number will.
Why the range stops at 300px
Per the CSS spec, when a corner radius value exceeds half the length of the shorter adjacent edge, the browser automatically clamps it down to that maximum, a border-radius bigger than half your box's height or width can never make the corner curve any further, it just caps out at a perfect semicircle or a fully rounded pill shape. The 300px ceiling here comfortably covers that clamping point for the vast majority of real button and card sizes, so there's rarely a reason to need a larger raw number.
Practical patterns worth knowing
A "pill" button is just a rectangle where every corner's radius is set at or above half the element's height, linking all four corners and pushing the value up until the sides go fully round achieves this without any guesswork. A "material card" look typically uses a small, uniform radius like 8-12px on all four corners. Tab-style UI elements often round only the top two corners and leave the bottom two square (0), so the tab visually merges into the panel below it, which is easy to set up here by unlinking the corners and zeroing out just the bottom pair. Because the live preview box updates on every keystroke, it's worth nudging values up and down a few pixels at a time rather than typing a number and moving on, subtle radius differences (4px versus 8px) read very differently once placed next to real content.
Frequently Asked Questions
Why is the corner order top-left, top-right, bottom-right, bottom-left instead of starting at the top?
CSS box-model shorthands like margin and padding describe edges and go clockwise from the top edge. border-radius describes corners instead, so its clockwise order starts at the top-left corner. This tool's four inputs follow that exact spec order so the generated CSS matches what you'd hand-write.
Can I make elliptical or egg-shaped corners with this tool?
Not directly. This generator only outputs one radius value per corner, which produces circular-arc corners. True elliptical corners need the CSS spec's slash-separated syntax with a second set of vertical radius values, which you'd need to add manually to the copied CSS.
Why doesn't this tool offer a percentage-based border-radius?
The inputs always output pixel values because the preview is a fixed-size box. Percentage values like 50% scale automatically with an element's actual width and height, which is useful for responsive circles and pills, but can't be accurately previewed from a static-size box, so this tool sticks to pixels.
What happens if I set a corner radius larger than half the box's height?
Per the CSS spec, the browser automatically clamps the radius so it never exceeds half the length of the adjacent edge. A very large value simply produces a fully rounded semicircle or pill shape rather than any further visual change, which is why this tool's slider tops out at 300px.
Does turning off "Link all corners" keep my current values?
Yes, unchecking it leaves all four corners exactly as they are and simply lets you edit each one independently going forward. It's checking the box that resets all four corners to match the top-left value.
How do I create an asymmetric shape like a speech bubble corner?
Uncheck "Link all corners" first, then set one corner (for example bottom-left) to 0 while leaving the other three rounded. This produces a sharp point on that one corner while the rest of the box stays curved, a common technique for chat-bubble UI elements.