Border Radius: Creating Rounded Corners in CSS

Border Radius Basics

The CSS border-radius property rounds the corners of an element’s outer border edge. A single value like border-radius: 8px applies the same rounding to all four corners. This simple property transforms harsh rectangles into softer, more approachable shapes and is one of the most frequently used CSS properties in modern web design.

Before border-radius existed, designers used background images to simulate rounded corners, a tedious technique that modern CSS eliminates entirely.

Syntax Options

Single value: border-radius: 10px applies uniform rounding. This is the most common usage for buttons, cards, inputs, and badges.

Two values: border-radius: 10px 20px applies the first value to top-left and bottom-right, and the second to top-right and bottom-left. This creates a diagonal symmetry.

Four values: border-radius: 10px 20px 30px 40px sets each corner individually, clockwise from top-left: top-left, top-right, bottom-right, bottom-left.

Individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius target specific corners when you need to mix rounded and sharp corners.

Percentage values: border-radius: 50% on a square element creates a perfect circle. On a rectangle, it creates an ellipse. Percentages are relative to the element’s dimensions, making them responsive.

Creating Common Shapes

Pills and capsules: Apply a border-radius greater than or equal to half the element’s height. A button that is 40px tall with border-radius: 20px (or 9999px as a failsafe) produces a pill shape regardless of width. This style is popular for tags, badges, and call-to-action buttons.

Circles: Set equal width and height, then apply border-radius: 50%. A 48px by 48px element with 50% radius becomes a perfect circle. This is the standard for avatar containers, icon backgrounds, and status indicators.

Organic shapes: Using different values for each corner creates asymmetric, blob-like shapes. Combining elliptical radii (using the slash syntax) produces even more organic forms. These shapes suit decorative backgrounds, illustration elements, and creative layouts.

Elliptical Corners

Border-radius supports elliptical values using a slash: border-radius: 50px / 20px creates corners that curve 50px horizontally and 20px vertically, producing an oval rather than circular curve. This enables egg-shaped elements, asymmetric arches, and other non-circular curves.

The full four-value syntax with the slash allows every corner to have a different elliptical radius: border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px. This level of control enables complex organic shapes entirely through CSS.

Design Best Practices

Consistency: Use the same border-radius values throughout your design system. If cards have 8px radius, buttons should match (or use a deliberately different value like a pill shape). Random radius values create visual disharmony.

Scale with element size: Larger elements can handle larger radii. A small 32px button might use 4px radius, while a large hero card might use 16px or 24px. Scaling radius proportionally to element size maintains visual balance.

Avoid over-rounding: Excessive border-radius on elements with content can clip text or create awkward spacing in corners. Ensure internal padding accounts for the corner curve so content does not crowd the rounded edges.

Nested border-radius: When a rounded element contains another rounded element (like a card inside a card), the inner element’s radius should be smaller by the amount of padding between them. If the outer card has 16px radius and 8px padding, the inner element should have 8px radius. This maintains visually parallel curves.

Use the CSS tools on CalcHub to experiment with border-radius values, or explore our design tools for visual experimentation.

Create perfect rounded corners with CalcHub’s CSS tools.