Border Radius Generator
Build CSS border-radius visually. Adjust each corner independently or lock all four together. Supports px, %, and rem units. Auto-collapses to the shortest valid shorthand.
.element { border-radius: 20px; }
About Border Radius Generator
Border radius is one of the most fundamental design tokens in modern UI — it determines how rounded (or sharp) every card, button, and container feels. This tool builds border-radius CSS visually, with independent control over each of the four corners plus a 'lock all corners' toggle for uniform rounding. It supports px, %, and rem units and auto-collapses to the shortest valid CSS shorthand.
Percentage radius (up to 100%) creates capsule shapes on rectangles and perfect circles on squares — commonly used for avatar rings, badges, and pill-shaped buttons. The auto-shorthand collapsing means the output is always the minimum valid CSS: if all four corners are 20px, the output is '20px'; if only opposite corners match, the two-value shorthand is used. Ideal for design system tokens and one-off custom radius work.
How to Use
Adjust each of the four corners (top-left, top-right, bottom-right, bottom-left) independently.
Toggle 'Lock all corners' to change all four together for uniform rounding.
Switch units — px for fixed radius, % for radius relative to element size (100% creates a pill/circle depending on shape).
The output is auto-collapsed to the shortest valid CSS shorthand.
Frequently Asked Questions
What's the difference between border-radius in px vs %?
px = absolute (20px always looks the same). % = relative to element size (50% on a square makes a circle; 50% on a rectangle makes a pill/oval). Use % for shapes that should scale with element size; px for consistent visual radius.
How do the four shorthand values work?
border-radius: TL TR BR BL — starts at top-left and rotates clockwise. Two values (A B) means A for TL+BR, B for TR+BL. Three values (A B C) means TL, TR+BL, BR. One value applies to all four.
Can border-radius create ellipses (elliptical corners)?
Yes — the syntax is border-radius: X Y where X is the horizontal radius and Y is the vertical. This tool covers the common per-corner case; for elliptical corners, add the /X manually in your CSS.
Are there performance concerns?
None. Border-radius is composited by the GPU on every modern browser and has effectively zero rendering cost.