How to Use border-radius in CSS

The CSS border-radius property rounds the corners of any box and is one of the highest-ROI design knobs on the web: one line changes the entire feel of a card, button, or avatar. The basics are trivial, but the full feature is surprisingly deep — shorthand for all four corners, individual-corner properties, pixel versus percent units, elliptical radii, and the pill, circle, and squircle patterns every design system eventually needs. This guide walks through the syntax variations in the order you actually need them, explains when to use percent versus pixels, and covers the common shape patterns with copy-ready code.

The simplest form

One value applies to all four corners:

.card {
  border-radius: 8px;
}

This is 80% of what most sites need: a single radius that softens every corner of every card, button, and input. Pick one value for your design system (commonly 4, 6, 8, 12, or 16 px), apply it globally, and stop agonizing.

Shorthand: one, two, three, or four values

Like padding and margin, border-radius accepts up to four values with specific meanings:

border-radius: 8px;                  /* all four corners */
border-radius: 8px 16px;             /* top-left+bottom-right, top-right+bottom-left */
border-radius: 8px 16px 4px;         /* TL, TR+BL, BR */
border-radius: 8px 16px 4px 12px;    /* TL, TR, BR, BL (clockwise from top-left) */

The four-value form is clockwise starting from the top-left, same order as padding and margin (top, right, bottom, left adapted to corners).

Individual corner properties

When you want to round only specific corners, the per-corner properties are clearer than a four-value shorthand:

.tab {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  /* bottom corners stay square */
}

Common patterns:

• Tab shape: top corners rounded, bottom square.
• Card with image on top: top-radius on the image, match on the outer card, bottom square or matching the card.
• Chat bubble with tail: three corners rounded, one square on the speaker side.
• Modal with a footer: top corners rounded to match content, footer gets bottom rounding.

Percent versus pixels

A fixed pixel radius (border-radius: 12px) keeps the same visual curve regardless of element size. A percentage (border-radius: 50%) scales with the box: 50% of the shorter side for a circle, or proportional curves that grow with the element.

Use pixels for consistent curves across a design system. Use percentages for shapes that should morph with size:

• 50% on a square gives a circle.
• 50% on a rectangle gives a pill with half-circle ends.
• 25% gives a rounded-square shape that scales.

Pill and capsule buttons

The classic pill button: make the radius greater than or equal to half the height:

.pill {
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
}

Using 9999px (or any large value) is the idiom: the radius saturates at half the height, so the value doesn’t need to match the height exactly. The button stays perfectly pill-shaped even if you change height or padding later.

Perfect circles

A perfect circle needs a square container plus 50% radius:

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

If the element isn’t square, 50% produces an ellipse. For avatar grids, enforce square dimensions with aspect-ratio: 1 / 1 or explicit width and height.

Elliptical radii

A corner can have different horizontal and vertical radii, producing an ellipse in that corner. Syntax uses a slash:

.hero {
  border-radius: 40px / 20px;
}

This makes every corner an ellipse wider than it is tall. Combined with the four-value shorthand, you can produce creative shapes:

.blob {
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
}

That produces an organic, blob-like shape useful for decorative backgrounds.

Radius versus overflow clipping

A rounded box clips its background and border at the radius, but child elements leak past the curve by default. To clip children too — images that extend to the card’s edge, video embeds — add overflow: hidden:

.card {
  border-radius: 12px;
  overflow: hidden;
}

Watch out: overflow: hidden also clips box shadows of children, so if you’ve got a child element with its own shadow that should spill outside, you need a different approach (usually shadow on the parent, not the child).

Radius and borders

When you have both border and border-radius, the border follows the curve. Keep borders subtle at small radii; a 2 px border on an 8 px radius reads fine, but a 10 px border on a 12 px radius looks chunky and cartoonish.

Borders with large radii on rectangular elements can produce a visible “stretched ring” effect at the long ends — the border appears thicker there because the curve is tighter. For pills this is usually fine; for oblong cards, consider smaller radii.

Radius and outlines

Historically, outline did not respect border-radius — the outline would draw a sharp-cornered rectangle around a rounded element. Modern browsers support rounded outlines natively, but if you need to support older browsers or want extra control, box-shadow with 0 0 0 2px color is a common drop-in replacement that does respect the radius.

The squircle problem

iOS app icons use a shape called a squircle — a superellipse, not a true rounded rectangle. CSS border-radius can’t produce a true squircle; its curves are circular arcs. For most design contexts the difference is imperceptible, but if you’re matching iOS iconography precisely, you need SVG or clip-path with a squircle formula rather than border-radius.

Design system presets

Rather than choosing radii per component, define a scale and use it:

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

Then components reference the variables. Changing the system is one edit instead of a hundred.

Common mistakes

Using 50% radius on a rectangle when you wanted a rounded square, and getting a pill. Forgetting overflow: hidden and watching child images leak past rounded corners. Applying giant radii to small elements so the content feels cramped inside a blob. Using inconsistent radii across a design (4 px here, 6 px there, 7 px somewhere else) so nothing feels like one system. Rounding borders to the point of cartoonishness. And putting border-radius on a table element without knowing that tables have quirks — the cells can leak past the curve unless you also set border-collapse: separate and radii on the corner cells.

Run the numbers

Our border-radius generator gives you a live visual for any combination of per-corner radii and copy-ready CSS. Pair it with the box shadow generator for card styling and the gradient generator for modern-looking backgrounds.