Border Radius Generator
Builds a CSS border-radius string in the browser. Set top-left, top-right, bottom-right, and bottom-left in pixels, or lock all four to one value. Equal corners use shorthand such as border-radius: 8px; unequal corners use CSS order top-left, top-right, bottom-right, bottom-left. This is not a component library.
Border radius generator
Client-side only. Values are not sent to a server. This is a CSS string generator, not a component library. Input is not sent.
How to use
- Set top-left, top-right, bottom-right, and bottom-left in pixels. The default is 8px on every corner.
- Optionally lock all corners to one value. Read the CSS as text. Copy uses the clipboard on this device only.
- Nothing is sent to a server. This is not a component library. Refreshing the page clears the form.
Results
border-radius: 8px;Text only. Preview uses style.borderRadius from validated numbers. Client-side only. Not sent. Not a component library.
Runs in your browser. Nothing is uploaded.
Frequently asked questions
What is the CSS border-radius order?
Four different values are written top-left, top-right, bottom-right, then bottom-left. The worked example 8, 16, 24, 32 becomes border-radius: 8px 16px 24px 32px;. That is CSS TL TR BR BL order. You copy that string into a stylesheet.
When does this use shorthand?
When all four corners are equal, the page writes one value: border-radius: 8px;. Unequal corners use the four-value form. Lock-all sets every corner to the same pixel value so the output stays shorthand.
Which units does this border radius generator use?
Pixels only. Each corner accepts 0 to 200. Values outside that range, missing values, or non-numeric input fail closed. There is no rem, %, or em output.
Is this client-side? Do I need an account?
Yes, it is client-side only. There is no signup. Corner values never leave the browser. Tallymill does not save what you enter. Refreshing the page clears the form.
Is this a component library?
No. This page is a CSS string generator. It is not a component library and not a design-system product. There is no component download. The optional preview only sets style.borderRadius from already-validated numbers.