Border Radius Generator

About this tool

Rounded corners are often treated as one number, but CSS can control all four corners independently. The Border Radius Generator previews top-left, top-right, bottom-right and bottom-left values and returns the shortest practical border-radius declaration for the selected shape.

Equal values produce familiar cards and buttons; asymmetric values can create labels, speech-bubble bases, image masks and more distinctive panels. Very large values relative to an element's size are automatically constrained by the browser, which is why 9999px is commonly used for pill shapes. Pair rounded corners with the Box Shadow Generator for elevated cards, but keep both effects restrained so the interface remains clear.

How to use it

1. Enter the radius for the top-left, top-right, bottom-right and bottom-left corners.
2. Watch the preview to confirm the shape remains balanced at the intended component size.
3. Use matching values for conventional cards or different values for an asymmetric shape.
4. Copy the generated CSS declaration.
5. Test the radius with real content, borders and overflow behavior before using it site-wide.

Useful ways to apply it

• Creating rounded cards, buttons, inputs, avatars and image containers.
• Building pill-shaped navigation items and status badges.
• Making asymmetric promotional panels or decorative image crops.
• Matching corner values from a design file without rewriting shorthand manually.
• Standardizing radii before moving them into CSS custom properties.