CSS Border Radius: From Basics to Shapes

Understanding Border Radius

The CSS border-radius property rounds the corners of an element's outer border edge. Introduced in CSS3, it eliminated the need for corner images that were common in early web design. Today it is one of the most frequently used CSS properties, appearing on buttons, cards, avatars, inputs, and modals.

At its simplest, a single value creates uniform rounding on all four corners: border-radius: 8px; adds an 8-pixel curve to every corner. The value represents the radius of a circle (or ellipse) that defines the curve. Larger values create more pronounced rounding.

Setting border-radius to 50% on a square element creates a perfect circle. On a rectangular element, 50% creates an ellipse. This technique is the standard way to create circular profile pictures and status indicators in CSS.

Syntax and Shorthand

The property accepts one to four values, following the same clockwise pattern as margin and padding:

• One value: border-radius: 10px; — all four corners get the same radius.
• Two values: border-radius: 10px 20px; — top-left/bottom-right get 10px, top-right/bottom-left get 20px.
• Three values: border-radius: 10px 20px 30px; — top-left 10px, top-right/bottom-left 20px, bottom-right 30px.
• Four values: border-radius: 10px 20px 30px 40px; — top-left, top-right, bottom-right, bottom-left, clockwise from top-left.

You can also set individual corners using longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Each corner can accept two values separated by a space for elliptical radii — more on that in the next section.

Elliptical Radii and Organic Shapes

The slash syntax unlocks elliptical corners: border-radius: 50px / 25px; creates corners with a horizontal radius of 50px and a vertical radius of 25px. The result is an oval curve rather than a circular one.

The full syntax with the slash allows different elliptical values for each corner:

border-radius: 50px 30px 60px 20px / 25px 40px 10px 35px;

The four values before the slash are horizontal radii (top-left, top-right, bottom-right, bottom-left). The four values after the slash are vertical radii in the same order. This creates asymmetric, organic shapes that feel natural and fluid.

Designers use complex border-radius values to create blob-like shapes for backgrounds, badges, and decorative elements. These shapes look hand-drawn and organic compared to the geometric precision of uniform radii.

A popular blob shape: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. Each variation of percentages creates a distinct organic form.

Common Design Patterns

Pill Buttons

Set border-radius to a value larger than half the element's height to create a pill shape: border-radius: 9999px;. Using an exaggeratedly large value ensures the pill shape works regardless of the button's content length or height.

Rounded Cards

A subtle radius of 8-12px is the standard for card components. This softens the corners without making the card feel overly rounded: border-radius: 12px;

Top-Only Rounding

For cards with an image at the top and content below, round only the top corners of the image: border-radius: 12px 12px 0 0;

Notched Corners

Combine border-radius with clip-path for notched or chamfered corners that border-radius alone cannot produce. For simple use cases, though, border-radius handles the vast majority of corner treatments.

Circle Avatars

The classic circular avatar: width: 48px; height: 48px; border-radius: 50%; overflow: hidden;. The overflow hidden ensures the image stays within the circle boundary.

Generate Border Radius Visually

Our Border Radius Generator lets you drag control points to set the radius for each corner independently. It supports both circular and elliptical radii, previews the shape in real time, and outputs the CSS code you can copy directly into your stylesheet.

The visual approach is faster than guessing values in code, especially for elliptical radii where the relationship between horizontal and vertical values is hard to predict. Adjust, preview, copy — the workflow takes seconds instead of the trial-and-error cycle of editing CSS manually.