About This Tool
The CSS Border Radius Generator gives you full control over how rounded your elements appear. Use four independent sliders — one per corner — to create asymmetrical shapes like squircles, speech bubbles, or pill buttons, or lock all corners together for quick uniform rounding. The live preview updates as you drag so you never have to guess what your border-radius declaration will look like in the browser.
Mastering border-radius goes beyond simple rounded corners. By giving each corner its own value you can produce organic, fluid shapes that are impossible to achieve with a single shorthand value. Designers increasingly rely on asymmetric rounding to give UI elements a distinctive personality — this tool makes those advanced shapes accessible without memorizing multi-value border-radius syntax.
When you are satisfied with the shape, hit "Copy CSS" to get the ready-to-use declaration. Whether you need a subtle 4px rounding on a button or a wildly organic shape on a hero section, this generator handles it all and produces clean, standards-compliant CSS that works in every modern browser.