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%;
}How to use the ToolOrbit Border Radius Generator
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.
