Border Radius Generator
Round each corner with sliders, shape organic blobs with the elliptical mode, and copy the CSS instantly.
Every corner is drawn right in your browser. Nothing you set here is uploaded to BroBroGo.
FAQ
How do the four corners and px vs % work?
The four sliders map, clockwise, to the top-left, top-right, bottom-right and bottom-left corners. In pixels a corner rounds by a fixed amount; in percent it rounds relative to the box — a horizontal percent follows the width and a vertical percent follows the height, so 50% turns a square into a circle.
What does elliptical mode do?
Off, every corner is a quarter-circle with a single radius. Turn it on and each corner gets a separate horizontal and vertical radius, which is how you build soft, organic “blob” shapes. The generator writes the two-value slash form for you and drops back to the short form once the corners are round again.
How do I make a perfect circle or a pill?
Link the corners, switch to percent and set 50%: a square becomes a circle. For a pill-shaped button, keep pixels instead and drag a corner past half the button’s height — the sides stay fully rounded at any width. The Circle preset sets the first case up in one click.