Set the radius of each of the four corners independently

With Border radius, designers and front-end developers can tune an interface before implementation. Set the radius of each of the four corners independently.

Set the radius of each of the four corners independently. The tool is free in your browser and shows the result without asking you to create an account.

How to use

Enter the radius value for the top-left corner, then the other three corners in the specified order.
Use a unit such as px, em or percent, and keep the same unit for all four corners.
Click the generate button to produce the matching border-radius CSS rule.
Read the result, which combines the four values, and copy it into your stylesheet.
Test the rendering on a sample element before adding it to your page.

Example

The sample input uses four different corner values. After generating, the result shows the corresponding border-radius property. You can compare this output with your own values to confirm the corner order before pasting it into your code.

Limits and formats

The tool does not draw a box on screen; it only produces the CSS rule to copy.
Values must be numeric and zero or positive; negative values are not accepted by the CSS property.
Mixing units may cause the browser to ignore the result.
Always check the final rendering in your page, because the element context can affect the visual effect.

Where processing happens

Everything runs in your browser. The values you enter are never uploaded or stored. The calculation and formatting of the CSS rule happen locally, with no outside communication.

Frequently asked questions

In what order should I enter the four values?

The expected order is top-left, top-right, bottom-right, bottom-left. This is the standard order for the border-radius property. If you swap two values, the rendering will differ. Check the displayed result to confirm.

Can I use percentages?

Yes, percentages are accepted. They create rounded corners proportional to the element size. Keep the same unit for all four corners to avoid an inconsistent result.

Is the result ready to paste into my CSS file?

Yes, the result is a complete CSS property. You can copy it and paste it into your stylesheet. Just make sure it is not overridden by another rule.