Border Radius Generator
Build border-radius values per corner with live preview.
About this tool
Build border-radius values per corner with live preview. Experiment with motion, layout, and color in real time — then copy values into your stylesheet.
Adjust each corner (top-left, top-right, bottom-right, bottom-left). Pick a unit (px, rem, %) that matches your design system. Example — Uniform 8px corners: try `tl=tr=br=bl=8, unit=px` and expect something like `.element { border-radius: 8px 8px 8px 8px; }`.
Elliptical radii (two radii per corner) are not fully exposed in the simple controls. See also: Box Shadow Generator, and CSS Gradient Generator. Runs in your browser — nothing you paste gets uploaded.
How to use
- Adjust each corner (top-left, top-right, bottom-right, bottom-left).
- Pick a unit (px, rem, %) that matches your design system.
- Preview the shape on the sample box.
- Copy the border-radius shorthand into your component class.
Example
Uniform 8px corners
Input
tl=tr=br=bl=8, unit=px
Output
.element {
border-radius: 8px 8px 8px 8px;
}Limitations
- Elliptical radii (two radii per corner) are not fully exposed in the simple controls.
- Percentage radii resolve against the element’s own box — preview size may differ from production.
- Does not emit separate logical properties (border-start-start-radius) for RTL.
Related tools
2Frequently asked questions
What does the Border Radius Generator do?
Build border-radius values per corner with live preview. Runs in your browser — no install, no account.
How do I use the Border Radius Generator?
Adjust each corner (top-left, top-right, bottom-right, bottom-left). Pick a unit (px, rem, %) that matches your design system. Preview the shape on the sample box. Copy the border-radius shorthand into your component class.
Is the Border Radius Generator free?
Yes. No signup, no usage limits, no paywall.
Does the Border Radius Generator upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the Border Radius Generator?
Elliptical radii (two radii per corner) are not fully exposed in the simple controls. Percentage radii resolve against the element’s own box — preview size may differ from production. Does not emit separate logical properties (border-start-start-radius) for RTL.