About the Border Radius Generator
Border radius is one of those properties where a two-pixel difference changes how a whole interface feels. Sliding a control and watching the shape update beats editing a number, saving and reloading — especially when the four corners differ, where the shorthand order trips people up.
How to use the Border Radius Generator
- Choose whether all corners share a value or each is set separately.
- Drag the sliders and watch the preview shape change.
- Switch units between px, rem and percent as your design system requires.
- Copy the generated CSS.
Why use this tool?
Per-corner control
Set top-left, top-right, bottom-right and bottom-left independently, in the correct shorthand order.
Unit switching
Percent radii scale with the element; px and rem stay fixed. Compare all three instantly.
Common presets
Jump to 4, 8, 12 or 24 px, or a full pill shape, to match typical design-system scales.
Frequently asked questions
What order does the border-radius shorthand use?
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. With two values the first is top-left/bottom-right.
How do I make a perfect circle?
Use border-radius: 50% on an element with equal width and height. A pill shape uses a large px value such as 999px.
Why does my percent radius look squashed?
Percentages resolve against each axis separately, so on a wide element the horizontal curve stretches. Use px or rem when you need a consistent corner.