CSS border radius generator
Set the rounding for all corners at once or for each corner separately, in pixels or percent, and optionally elliptical with separate horizontal and vertical radii. The generator writes the value in its shortest valid form, lists the four longhand properties and works out which radii the browser actually uses at your box size.
How it is calculated
How the browser reads border-radius
The shorthand takes one to four values in the order top left, top right, bottom right, bottom left – clockwise. Missing values are filled in just like margin:
| Value | Meaning |
|---|---|
12px | all four corners 12 px |
24px 8px | top left and bottom right 24 px, top right and bottom left 8 px |
24px 8px 4px | top left 24 px, top right and bottom left 8 px, bottom right 4 px |
40px 10px / 20px 5px | elliptical: horizontal radii before the slash, vertical radii after it |
The generator reduces every input to the shortest equivalent form: 10px 10px 10px 10px becomes 10px, and a slash with identical values is dropped.
Percentages: width and height separately
Percentages refer to the box width horizontally and to its height vertically. 50% therefore turns a square into a circle, but a 240 × 160 px rectangle into an ellipse with 120 px and 80 px radii. For a circle-shaped corner on a rectangle, use pixels.
When curves overlap
If two adjacent radii add up to more than the side they share, the W3C specification makes the browser scale all radii by the same factor f = min(side length ÷ sum of the two radii on that side).
Example “pill shape” border-radius: 9999px on a 200 × 40 px button: on the left and right, the sum is 9999 + 9999 = 19,998 px against a 40 px height, so f = 40 ÷ 19,998 ≈ 0.002. Each corner gets 9999 × f = 20 px – exactly half the height, so the ends are perfect semicircles. “Used radii” shows these values for your box.
Frequently asked questions
How do I make a circle with CSS?
Give a square element border-radius: 50%. On a rectangle, 50% produces an ellipse; for rounded ends (a pill shape), use a very large pixel value such as 9999px.
What does the slash in border-radius mean?
It separates horizontal from vertical radii. 40px / 20px rounds each corner as a quarter ellipse, 40 px wide and 20 px tall. With up to four values on each side, that makes eight values in total.
Why is the rounding smaller than what I set?
Because the curves would otherwise overlap. The browser then scales all radii down by the same ratio – including corners that would have fit on their own. The generator shows the factor and the radii actually used.
What order do the four values follow?
Top left, top right, bottom right, bottom left – clockwise from the top left. The longhand properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.
Sources and legal basis
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
As of:
Related tools
- CSS box shadow generatorBuild CSS box shadows with sliders: multiple layers, offset, blur, spread, color with alpha, inset and presets – live preview and one-click copy of the CSS.
- CSS gradient generatorBuild CSS gradients: linear, radial or conic, as many color stops as you need, angle and fallback color – live preview and CSS ready to copy.
- Color converter: HEX, RGB, HSL, HSV, CMYKConvert color codes: HEX to RGB, RGB to HEX, HSL, HSV, HWB and CMYK – type any format or use the color picker and copy the result, right in your browser.
- Aspect Ratio CalculatorCalculate the aspect ratio from width and height (1920 × 1080 = 16:9), find the missing side, decimal value, nearest standard ratio and CSS aspect-ratio.
- Base64 Encode and DecodeEncode and decode Base64 and Base64url with proper UTF-8, plus URL encode/decode (percent-encoding). Clear error messages, runs locally in your browser.
- DNS lookupLook up the DNS records of any domain: A, AAAA, MX, TXT, CNAME, NS, SOA, CAA, SRV and PTR – with TTL, DNSSEC status and explained error codes. Free.