Border Radius Generator

About This Tool

The border-radius property rounds the corners of an element. When all four values are equal, a shorthand single value is used. Different values create asymmetric shapes — a pill uses 50% on all corners, a leaf uses 0% and 50% alternating.

Click any corner number to type a value directly, or drag the linked slider to change all four corners at once. Toggle Lock all corners off to control each corner independently.

How to Use

1. Enter values in the four corner inputs (top-left, top-right, bottom-left, bottom-right).
2. Enable Lock all corners to set all four values simultaneously with the slider.
3. Switch between px and % units depending on your design needs.
4. Click a preset (Pill, Leaf, Blob, etc.) to apply a predefined shape instantly.

Use Cases

UI designers use border-radius to create buttons, cards, and avatar shapes. Developers fine-tune rounded corners to match brand design systems. The pill shape (50%) is commonly used for tags and badges. Asymmetric values create organic leaf or blob shapes for decorative elements.

FAQ

• What is the difference between px and %? — px gives a fixed corner radius regardless of element size. % is relative to the element's width and height — 50% on all corners makes a perfect circle (if the element is square).
• Can I set different radii for each corner? — Yes. Uncheck Lock all corners and type different values in each corner input.
• What does the shorthand output mean? — When all four corners are equal, the output is a single value. When they differ, the CSS order is: top-left, top-right, bottom-right, bottom-left.