CSS border radius generator
This CSS border radius generator sets 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.
Source: css-backgrounds-3, § 4.1, W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties. Updated: .
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:
How to create rounded corners
- Set one radius for all corners or unlink them and set each corner separately, in px or %.
- For elliptical corners, choose the horizontal and vertical radius separately and enter the box width and height.
- Copy the shortest CSS declaration and check which radii the browser actually uses at that box size.
| 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.
More CSS tools: build shadows with the CSS box shadow generator, gradients with the CSS gradient generator, and convert HEX, RGB or HSL values with the color converter.
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.
How do I round only one corner?
Set the corners separately and leave the others at 0. Rounding only the bottom-left corner gives border-radius: 0 0 0 12px – the same as border-bottom-left-radius: 12px.
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: · Editorial policy
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.
- What is my IP address?What is my IP? See your public IPv4 or IPv6 address at once, plus approximate location, internet provider and browser details. Free, never stored.
- JSON compareJSON compare: find the differences between two JSON documents with path, old and new value. Key order is ignored. In your browser, no upload.
- JSON Escape / UnescapeJSON escape and unescape online: turn any text into a valid JSON string with escaped quotes, backslashes and line breaks, or decode it back – in your browser.
- CSS clamp calculatorCSS clamp calculator for fluid font sizes and spacing: enter minimum and maximum values plus the viewport range and copy the finished clamp() value.
- JWT decoder: read and verify a JSON Web TokenJWT decoder for header, payload and expiry (exp, iat, nbf). Verify the signature with a secret or public key. Everything runs locally in your browser.
- Cron expression generator and explainerCron expression generator and explainer: build or paste an expression, read it in plain words and see the next run times. Unix cron, Spring and Quartz, local.