Rounded corners soften interfaces and signal quality, from gently curved cards to fully pill-shaped buttons. The CSS border-radius property can do far more than a single uniform curve, though. The ToolOrbit Border Radius Generator lets you control every corner independently with a live preview and copy the exact CSS in one click.
How border-radius works
The border-radius property accepts up to four values, one for each corner starting at the top-left and moving clockwise. A single value rounds all corners equally, while individual values create asymmetric shapes. Using a large value like 9999px on a short element produces a perfect pill, and 50% on a square produces a circle.
- One value: rounds all four corners equally
- Four values: top-left, top-right, bottom-right, bottom-left
- Percentages: scale with the element, useful for circles and ovals
- Large pixel values: create pill-shaped buttons and badges
.card {
border-radius: 12px;
}
.tag {
border-radius: 12px 4px 12px 4px;
}
.avatar {
border-radius: 50%;
}Shaping corners with border-radius
Drag the slider for each corner, or set them together for a uniform curve, and watch the shape change instantly in the live preview. When you are happy with the result, copy the generated border-radius rule and drop it into your stylesheet.
- Adjust each corner with its own control
- Combine corners for symmetric or asymmetric shapes
- Preview the live shape as you edit
- Copy the finished CSS with one click
From subtle 8px cards to fully rounded avatars, the ToolOrbit Border Radius Generator removes the trial and error of guessing values. Experiment visually, then ship clean, copy-ready CSS that matches your design system.
One value, two values, four values — shorthand decoded
| Values | Meaning |
|---|---|
| 1 (8px) | All four corners |
| 2 (8px 16px) | Top-left & bottom-right; top-right & bottom-left |
| 3 (8px 16px 4px) | TL; TR+BL; BR |
| 4 (8px 4px 16px 12px) | TL; TR; BR; BL (clockwise) |
The generator collapses whatever you dial in to the shortest valid shorthand, which keeps exported CSS tidy. A slash syntax (8px / 40%) creates elliptical corners — trendy pill buttons and “squircle” cards — and is exactly the kind of thing it is easier to build visually than to type from memory.
Match the radius to the visual weight, not to a favorite number: tiny chips take 4–6px, cards take 12–16px, hero panels take 20px+, and pills go fully round. Consistent radii across components read as a system; a random radius per element reads as chaos. The same shorthand works on clip-path if you output from a generator.
