CSS Border Radius Calculator
Pixel radius from a percentage.
Work It Out And Get Clear Answers
Pixel radius from a percentage.
CSS Border Radius Estimator
Enter your numbers below for an instant estimate.
How It Works
Key concepts behind this calculator
Enter Values
Fill in each field with your own numbers.
Calculate
Press Calculate to see the result.
Review
Read the breakdown and the explanation.
Adjust
Change values to compare scenarios.
CSS Border Radius Quick Guide
Typical values for reference.
| Width (px) | Height (px) | Radius (%) | Radius in pixels |
|---|---|---|---|
| 200 | 100 | 20 | 20 px |
| 100 | 100 | 20 | 20 px |
| 400 | 100 | 20 | 20 px |
| 200 | 50 | 20 | 10 px |
| 200 | 200 | 20 | 40 px |
| Rule of thumb: check your inputs, use the result as a guide and round sensibly. | |||
CSS Border Radius FAQ
Answers to common questions about this calculator.
Radius in pixels = shorter side × percentage.
It uses the default inputs shown and the formula described above. Change any value and press Calculate to see how the result moves.
It is an estimate based on the inputs you enter. Check real quotes, labels, product data or official guidance for important decisions.
Yes. Replace each input with your own figures and press Calculate to update the result.