CalculateY
Quick Answer
Setting border-radius: 8px applies an 8-pixel radius to all four corners. For different corners, border-radius: 8px 16px 8px 0 sets top-left to 8px, top-right to 16px, bottom-right to 8px, and bottom-left to 0.
Corner Values
Preview
Common Examples
| Input | Result |
|---|---|
| All corners: 8px | border-radius: 8px; |
| TL: 16px, TR: 16px, BR: 0, BL: 0 | border-radius: 16px 16px 0 0; |
| TL: 50%, TR: 50%, BR: 50%, BL: 50% | border-radius: 50%; (creates a circle) |
| TL: 8px, TR: 0, BR: 8px, BL: 0 | border-radius: 8px 0; |
| TL: 12px, TR: 24px, BR: 12px, BL: 24px | border-radius: 12px 24px; |
How It Works
The CSS border-radius shorthand accepts 1, 2, 3, or 4 values, following the same top-right-bottom-left pattern used by other CSS shorthand properties:
1 value: border-radius: 8px applies 8px to all four corners
2 values: border-radius: 8px 16px applies 8px to top-left and bottom-right, 16px to top-right and bottom-left
3 values: border-radius: 8px 16px 4px applies 8px to top-left, 16px to top-right and bottom-left, 4px to bottom-right
4 values: border-radius: 8px 16px 4px 0 applies values to top-left, top-right, bottom-right, and bottom-left in clockwise order
Units: px vs. %
Pixel values create a fixed-size curve. Percentage values are relative to the element’s dimensions. Setting border-radius: 50% on a square element creates a perfect circle. On a rectangular element, 50% creates an ellipse.
Creating common shapes
- Rounded rectangle:
border-radius: 8px(subtle) or16px(more rounded) - Pill shape:
border-radius: 9999px(or any value larger than half the element height) - Circle:
border-radius: 50%on a square element - Top-rounded card:
border-radius: 12px 12px 0 0 - Chat bubble:
border-radius: 16px 16px 16px 0(sharp bottom-left corner)
The longhand properties
Each corner can also be set individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. The shorthand is preferred for brevity.
Worked Example
For a card with rounded top corners and square bottom corners at 12px: The values are TL: 12px, TR: 12px, BR: 0px, BL: 0px. Since TL equals BR and TR equals BL in the reversed pair order, the optimized shorthand requires 3 values: border-radius: 12px 12px 0;. The CSS output is border-radius: 12px 12px 0 0; (explicit 4-value form for clarity).
Related Calculators
Frequently Asked Questions
How do I make a circle with border-radius?
border-radius: 50% on a square element (equal width and height). The 50% value rounds each corner into a quarter-circle, which together form a perfect circle. If the element is rectangular, 50% creates an ellipse instead.
What is the difference between px and % for border-radius?
% ensures the rounding scales with the element. For consistent UI components, px provides a predictable curve size.
How do I make a pill-shaped button?
border-radius: 9999px (or any very large pixel value). When the radius exceeds half the element's height, the browser caps it, creating a perfect semicircle on each end. This works regardless of the button's width or height.
Can I set different horizontal and vertical radii?
border-radius: 10px / 20px. The values before the slash are horizontal radii, and the values after are vertical radii. This creates elongated curves rather than circular ones. This calculator generates circular (equal horizontal and vertical) radii.