The border-radius property is one of the most commonly used in CSS. It lets you round element corners, transforming rectangles into elements with soft shapes: from slightly rounded cards to perfect circles and complex organic figures.
Border-radius Syntax
border-radius accepts one to four values:
border-radius: 10px;— all four corners are the same.border-radius: 10px 20px;— top-left and bottom-right = 10px; top-right and bottom-left = 20px.border-radius: 10px 20px 30px;— top-left = 10px; top-right and bottom-left = 20px; bottom-right = 30px.border-radius: 10px 20px 30px 40px;— each corner separately (clockwise from top-left).
Elliptical Corners
Using the / symbol, you can set different horizontal and vertical radii, creating elliptical rounding:
border-radius: 50px / 25px;
Horizontal radius 50px, vertical 25px — this produces an elongated rounding. Each corner can have its own pair of values.
Popular Shapes
- Circle:
border-radius: 50%;(element must be square). - Pill:
border-radius: 9999px;— maximum rounding for a rectangle. - Material Design card:
border-radius: 8px;or12px;. - Drop:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. - Rounded top:
border-radius: 10px 10px 0 0;.
Percentages vs Pixels
Percentages are calculated from the element's dimensions: horizontal radius from the width, vertical from the height. That's why border-radius: 50% on a square produces a circle, while on a rectangle it produces an oval. Pixels give a fixed rounding that doesn't depend on the element's size.
Practical Tips
- For buttons and inputs, use the same border-radius (6-8px) for visual consistency
- For avatars and icons in a circle —
border-radius: 50%+overflow: hidden - Don't forget
overflow: hiddenif the element contains images — they may overflow beyond the rounded corners
Conclusion
Find the perfect rounding visually with our CSS Border Radius generator. For creating shadows and gradients, use the CSS Shadow and CSS Gradient generators.
