HIFreeTools
ENES

Free CSS Border Radius Generator

Set the radius of each corner of a box independently in pixels or percent, watch a live preview update as you type, and copy ready-to-paste CSS that collapses to the shortest valid border-radius shorthand.

Unit
px
px
px
px
Live preview
CSS
border-radius: 10px 20px 30px 40px;

Quick answer

To generate a CSS border-radius, enter a value for each corner (top-left, top-right, bottom-right, bottom-left) in px or %, or toggle 'Link all corners' to round them equally. The tool renders a live preview and outputs CSS like border-radius: 10px 20px 30px 40px;, automatically shortening it to fewer values when corners repeat. Everything runs locally in your browser.

Formula & method

CSS border-radius accepts up to four values applied clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. When values repeat, the property can be written more compactly. If the bottom-left equals the top-right, the fourth value is dropped, leaving three values (top-left, top-right, bottom-right). If the bottom-right then also equals the top-left, the third value is dropped, leaving two values (top-left/bottom-right, top-right/bottom-left). If all four corners are equal, a single value is used. This tool reads your four inputs, attaches the chosen unit (px or %), then collapses the list using exactly those rules so the output is always the shortest equivalent CSS. The same string is applied to a preview box via the element's borderRadius style, so what you see is precisely what the CSS produces. Percent radii are relative to the box dimensions, which is why 50% on a square yields a perfect circle. Any negative or non-numeric corner produces a friendly message instead of broken CSS.

Examples

Example 1: Four different corners
Input
TL 10, TR 20, BR 30, BL 40 (px)
Result
border-radius: 10px 20px 30px 40px;
Why
All four corners differ, so no value can be dropped. The four numbers are written clockwise from the top-left corner.
Example 2: All corners equal
Input
TL 12, TR 12, BR 12, BL 12 (px), or just link all to 12
Result
border-radius: 12px;
Why
Because every corner is the same, the four-value list collapses to a single value — the most common way to round a card or button uniformly.
Example 3: Perfect circle with percent
Input
All corners 50 (%)
Result
border-radius: 50%;
Why
On a square element, 50% on every corner curves each side into a full circle. Percent is relative to the box size, so the shape stays circular at any dimension.
Example 4: Diagonal symmetry collapses to two values
Input
TL 10, TR 25, BR 10, BL 25 (px)
Result
border-radius: 10px 25px;
Why
Bottom-left (25) mirrors top-right, so the fourth value drops; bottom-right (10) then mirrors top-left, so the third drops too. Two values mean top-left/bottom-right share 10px and top-right/bottom-left share 25px.

When to use this tool

  • Rounding cards, buttons, inputs, or modals and needing the exact CSS to paste into a stylesheet.
  • Creating asymmetric shapes — such as a speech bubble or a tab — where each corner needs a different radius.
  • Turning a square avatar or thumbnail into a circle or pill with a single percent value.
  • Quickly previewing how different corner values look before committing them to a design system or component library.

Common mistakes

  • Assuming the order is clockwise from the top — border-radius actually starts at the top-left and goes clockwise: top-left, top-right, bottom-right, bottom-left.
  • Expecting a circle from a non-square box: 50% only produces a perfect circle when the element is a square; on a rectangle it makes an ellipse/pill shape.
  • Forgetting a unit. A bare number like border-radius: 10 is invalid; pixels need px and relative rounding needs %.
  • Using negative values. Border-radius cannot be negative — negative input is ignored here and rejected by browsers.
  • Pasting four values when one would do. border-radius: 12px 12px 12px 12px works but the shorthand 12px is cleaner and easier to maintain.

Frequently asked questions

What order are the four border-radius values in?

Top-left, top-right, bottom-right, bottom-left — clockwise starting from the top-left corner. So border-radius: 10px 20px 30px 40px; rounds the top-left by 10px, top-right by 20px, bottom-right by 30px, and bottom-left by 40px.

Why does the generated CSS sometimes have fewer than four values?

CSS lets you omit values that repeat. If the bottom-left matches the top-right it can be dropped (three values); if the bottom-right also matches the top-left, that drops too (two values); and if all corners are equal you only need one value. The tool always outputs the shortest equivalent form.

How do I make a perfect circle?

Set all four corners to 50% on a square element (equal width and height). Percent radii are measured against the box size, so 50% curves each side into a full circle. On a non-square box, 50% gives an ellipse instead.

Should I use px or % for border-radius?

Use px for a fixed, consistent corner regardless of element size — ideal for buttons and cards. Use % when you want the rounding to scale with the element, such as pills (large radius) or circles (50%).

Can border-radius values be negative?

No. The CSS spec treats negative border-radius as invalid, and browsers clamp it to zero. This generator ignores negative or non-numeric input and shows a prompt to enter a valid number instead.

Does this tool send my values anywhere?

No. The preview and CSS are computed entirely in your browser with JavaScript. Nothing is uploaded, stored, or sent to a server, so it works offline once the page has loaded.

Sources & references

External references open in a new tab. We are independent and not affiliated with these organizations.

  • ✓ Free to use
  • ✓ No sign-up required
  • ✓ Runs entirely in your browser — nothing is uploaded.
  • ✓ Formula and method shown above
Last updated: How we calculateReport a correctionDisclaimer

Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.

Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.

Related tools

Embed this tool on your site

Free to embed, no sign-up. Paste this code where you want the css border radius generator to appear: