Build a CSS border-radius visually
Fine-tune each corner's border-radius visually, with live preview and copyable CSS.
Locked, one slider rounds all four corners together. Unlocked, each corner gets its own slider.
Watch the live preview to dial in anything from a subtle rounding to a full blob shape.
Equal corners copy as the short single-value form; mixed corners copy as the 4-value form.
Frequently asked
What order are the four corner values in?
Standard CSS order: top-left, top-right, bottom-right, bottom-left. The same order border-radius always uses when you give it four values.
Why does the output sometimes show just one value?
When all four corners are equal, the tool emits the shorter single-value form (e.g. border-radius: 24px;) instead of repeating the same number four times. Both are equivalent CSS.
Can I make an element fully circular?
Set all four corners to a value at least half the element's width and height (e.g. 200px on a 200px square), or just use the max of the radius slider on a small enough element.