CSS Border Radius Generator

Build a Border Radius With a Live Preview

Link all corners together

Top Left: 20px

Top Right: 20px

Bottom Right: 20px

Bottom Left: 20px

Generated CSS

Adjust the sliders above to build a border radius

Error

Something went wrong.

Understanding CSS Border Radius

Live Preview

Watch a sample box update instantly as you adjust each corner's radius.

Linked or Independent Corners

Link all four corners to move together, or unlink them for asymmetric shapes like speech bubbles or blob shapes.

Copy-Ready CSS

Copy the exact border-radius declaration to paste directly into your stylesheet.

Local Processing

The preview and CSS are generated entirely in your browser — no data is ever sent to a server.

Beyond Simple Rounded Corners

Setting all four corners to the same large value relative to the box size creates a pill or circle shape, while giving each corner a different radius can produce organic, blob-like shapes often used in modern web design for cards, buttons, and decorative backgrounds.

Key Takeaways

Four Independent Corners: Adjust each corner separately for asymmetric shapes.
Link Toggle: Link all corners together for quick, uniform rounding.
Client-Side Only: All generation happens locally in your browser — no data is ever sent to a server.

CSS Border Radius Generator - Free Online Tool