How to Use CSS border-radius

The CSS border-radius property rounds the corners of any box, turning sharp rectangles into soft cards, pills, and perfect circles. The shorthand accepts one to four values, each property targets a single corner, and a slash unlocks elliptical curves. Here is how to use all of it.

The shorthand: 1 to 4 values

border-radius takes between one and four values, and the count changes what they mean. The corners are read clockwise starting from the top-left.

One value applies to all four corners: border-radius: 12px;
Two values set top-left/bottom-right, then top-right/bottom-left: border-radius: 12px 4px;
Three values set top-left, then top-right/bottom-left, then bottom-right: border-radius: 12px 4px 8px;
Four values go in order: top-left, top-right, bottom-right, bottom-left: border-radius: 12px 4px 8px 20px;

Memorize the four-value order as clockwise from top-left and the shorter forms fall into place.

Per-corner properties

When you only need to round one or two corners, the longhand properties are clearer than counting values:

.tab {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

The four longhands are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. They are easy to read in a stylesheet and easy to override one at a time.

Pixels, percentages, pills, and circles

The value can be a length (px, rem, em) or a percentage. Percentages are relative to the box’s own size, which makes two patterns possible:

Circle: on a square element, border-radius: 50%; produces a perfect circle. Give an element equal width and height, add 50%, and you have an avatar or dot.
Pill: border-radius: 999px; (any value larger than half the height) rounds the short ends fully while leaving the long sides flat. This is the standard recipe for pill-shaped buttons and tags.

.avatar { width: 64px; height: 64px; border-radius: 50%; }
.pill   { padding: 8px 16px; border-radius: 999px; }

Elliptical corners with the slash

A single radius makes a quarter-circle. To make an oval-shaped corner, give each corner two radii separated by a slash: horizontal radius before the slash, vertical radius after it.

.banner { border-radius: 40px / 12px; }

That reads as: all corners have a 40px horizontal radius and a 12px vertical radius, producing a flattened, elliptical curve. The full eight-value form lets every corner differ: the values before the slash are the four horizontal radii (clockwise from top-left), and the values after are the four vertical radii.

Build it with the visualizer

Guessing radius values is slow. The Border Radius Visualizer lets you drag each corner and copies the exact CSS.

Open the Border Radius Visualizer.
Drag the corner handles, or type values per corner.
Switch between px and % to compare a fixed radius against a circle or pill.
Toggle the slash syntax to shape elliptical corners.
Copy the generated border-radius rule into your stylesheet.

Everything runs entirely in your browser. No code or design leaves your device.

Box Shadow Generator - pair rounded corners with a soft, layered shadow.
CSS Gradient Generator - fill your rounded cards with a smooth background blend.
Flexbox Playground - line up those pills and avatars in a flexible row.

Round one corner or all four, switch to % for circles and pills, and reach for the slash when you want an ellipse.