Step 1: Enter the corner values you want for each side (top-left, top-right, bottom-right, and bottom-left). Then choose a unit (px, %, em, or rem).
Step 2: Click "Generate Border Radius" to produce the CSS snippet. This snippet has the form:
border-radius: topLeft unit topRight unit bottomRight unit bottomLeft unit;
Step 3: Observe the live preview box below your generated code. You can copy the code by clicking "Copy CSS" and paste it into your stylesheet.
Example Calculation:
If you set the four corners to 20 and choose px as the unit, the tool will display:
border-radius: 20px 20px 20px 20px;
The preview box will have evenly rounded corners of 20px each.