CSS Border Radius Generator

What is CSS Border Radius Generator?

A CSS border-radius generator lets you visually control the rounding of each corner of an HTML element and generates the exact CSS you need to apply the shape. The border-radius property is one of the most used CSS properties in modern web design, responsible for the rounded corners that define cards, buttons, avatars, chips, and countless other UI components. While a single uniform value (border-radius: 12px) rounds all four corners equally, the full border-radius syntax allows independent control of each corner using either pixel values or percentage values (relative to the element dimensions). The long-form syntax (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) and the shorthand syntax (border-radius: top-left top-right bottom-right bottom-left) allow complex shapes including leaves, teardrops, and organic blobs using the two-value per-corner syntax (horizontal and vertical radii independently). The CSS Border Radius Generator provides sliders for each corner, a live preview on a colored element, and preset shapes for common design patterns.

How to Use CSS Border Radius Generator

1. Use the four corner sliders to set the radius for top-left, top-right, bottom-right, and bottom-left independently.
2. Click the Link Corners button to apply the same radius to all four corners simultaneously.
3. Toggle the Percentage mode to use relative values (useful for elements that scale with their container).
4. Enable Two-Value mode to set horizontal and vertical radii independently for each corner, creating elliptical roundings.
5. Preview your shape in real time on the element preview.
6. Click Copy CSS to copy the complete border-radius property to your clipboard.

Frequently Asked Questions