Design tool
Border Radius Preview
Adjust each corner radius independently with a live preview and copy-ready CSS.
CSS border radius
border-radius: 8px 16px 24px 32px;
How corner radius values shape a box
Border radius rounds the corners of an element by specifying a radius value (in pixels) for each of the four corners. The tool accepts four independent inputs in CSS order: top-left, top-right, bottom-right, and bottom-left. Each value is clamped to zero or greater, so negative entries are rejected. A radius of 0 produces a sharp right angle; larger values produce increasingly curved corners. A radius equal to half the box's width or height produces a semicircle on that side; equal to both dimensions produces a complete circle or pill shape. The live preview renders a colored box with the current radius values applied, updating instantly as you type.
The CSS output follows the four-value shorthand syntax, with each radius in pixels followed by the px suffix. The order is crucial: the first value applies to the top-left corner (northwest), the second to top-right (northeast), the third to bottom-right (southeast), and the fourth to bottom-left (southwest). This clockwise sequence matches the CSS box model convention used for padding, margin, and border properties.
Applying independent corner radii to a box
The default values 8, 16, 24, and 32 pixels create an asymmetric corner treatment: the top-left corner is slightly rounded at 8 pixels, the top-right is more rounded at 16 pixels, the bottom-right is quite rounded at 24 pixels, and the bottom-left is the most rounded at 32 pixels. This creates a subtle directional flow, with curvature increasing clockwise from the top-left corner around to the bottom-left.
When applied to a rectangular element, each radius value computes the curve independently. A 24-pixel radius on a 100×100 box creates a significant curve; the same 24-pixel radius on a 500×500 box appears more subtle because the curve spans a smaller percentage of the perimeter. The browser computes the circular arc for each corner using the specified radius; if radii overlap (totaling more than the box dimension), browsers reduce all radii proportionally to fit.
Corner radius design patterns and symmetry
Uniform radii (all four values equal, e.g., 8px 8px 8px 8px, or simply 8px in shorthand) produce perfectly balanced, traditional rounded boxes. Asymmetric radii create visual interest and directional cues: increasing radii clockwise suggest motion; alternating large and small radii create rhythm. Combining zero and nonzero radii targets specific corners: 0 0 12px 12px rounds only the bottom corners, useful for tabs that open downward or cards with sharp tops.
Large radius values (approaching the box dimensions) create pill shapes (wider than tall) or egg shapes. A very small radius on one corner with zero or large values on others creates unusual geometric silhouettes. The preview updates in real time, so experimenting with different values is immediate; copy the generated CSS to apply the design to your element.
Common border-radius patterns and their applications
- Uniform rounding (8px each): border-radius: 8px; produces classic rounded boxes, standard for buttons and cards in modern interfaces.
- Pill shape: a fixed radius of at least half the element's height, like border-radius: 999px; produces straight sides with semicircular ends, the standard treatment for pill buttons and toggle switches.
- Bottom-only rounding: border-radius: 0 0 12px 12px; shapes tab panels and collapsible sections that open downward without rounding the top edge.
- Asymmetric emphasis: border-radius: 4px 20px 4px 20px; alternates small and large radii to create rhythm and guide eye movement.
- Single corner rounding: border-radius: 16px 0 0 0; rounds only the top-left, useful for decorative asymmetric frames or highlight boxes.
Frequently asked questions
What's the difference between border-radius and border width?
Border-radius curves the corners of an element independent of the border width. A thick border (e.g., 4px) still has its corners rounded by the radius value; the border width only affects the thickness of the line, not the curvature.
What happens if I set all corners to 50%?
A 50% radius on all corners rounds each corner relative to the box's own dimensions. A square becomes a perfect circle, and a rectangle becomes an ellipse with no straight edges. For a true pill shape with flat sides, use a fixed radius of at least half the height (999px is a common shortcut) instead of a percentage.
Why are the corners in a specific order (TL, TR, BR, BL)?
This clockwise order (starting top-left, moving right, then down the right side, then left along the bottom) matches CSS conventions for padding, margin, and border properties, ensuring consistency across the specification.
Can I use percentage values instead of pixels?
Yes, the CSS border-radius property accepts pixels (px), percentages (%), and other length units. A percentage is relative to the element's width (for horizontal radii) or height (for vertical radii). This tool outputs pixels, but you can manually convert 8px to a percentage if your design system prefers it.
What happens if the radius values sum to more than the box size?
If the combined radii on one edge exceed that edge's dimension, browsers automatically scale all radii proportionally downward to prevent overlap. For example, on a 100px-wide box, radii of 60px and 60px on the top corners scale to 50px each.
How does border-radius work with box-shadow?
Box-shadow respects the border-radius curve and renders the shadow along the rounded edges, not the theoretical rectangular corners. This creates a cohesive depth effect where the shadow follows the element's actual shape.