CSS Border Radius Guide

The border-radius property rounds the corners of an element's outer border edge. It is one of the most-used CSS properties in modern UI design — buttons, cards, avatars, and input fields all rely on it. This guide covers everything from basic syntax to advanced shapes.

Basic syntax

At its simplest, border-radius takes a single value and applies it to all four corners equally.

.card {
  border-radius: 8px;   /* all four corners rounded equally */
}

.pill {
  border-radius: 999px; /* large value = fully rounded ends */
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;  /* perfect circle on equal width/height */
}

Note: Using 50% on a square element creates a circle. On a rectangle it creates an ellipse. Use 999px instead of 50% when you want pill-shaped buttons regardless of size.

Shorthand — controlling each corner

You can control each corner individually using shorthand. The order follows the same clockwise pattern as margin and padding: top-left, top-right, bottom-right, bottom-left.

/* One value — all corners */
.box { border-radius: 8px; }

/* Two values — top-left/bottom-right, top-right/bottom-left */
.box { border-radius: 8px 0; }

/* Three values — top-left, top-right/bottom-left, bottom-right */
.box { border-radius: 8px 4px 0; }

/* Four values — top-left, top-right, bottom-right, bottom-left */
.box { border-radius: 16px 16px 8px 8px; }

Longhand properties

Each corner also has its own longhand property, which is useful when you only want to override one corner in a modifier class.

.box {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

Percentage values

Percentage values are relative to the element's own dimensions — not the parent. The horizontal radius uses the element's width and the vertical radius uses its height.

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%; /* = 32px horizontal, 32px vertical — circle */
}

.banner {
  width: 400px;
  height: 200px;
  border-radius: 50%; /* = 200px horizontal, 100px vertical — ellipse */
}

Elliptical corners — the slash syntax

Each corner can have a different horizontal and vertical radius. You set this using a slash to separate the two sets of values. This creates elliptical corners rather than circular ones.

/* horizontal-radii / vertical-radii */
.egg {
  border-radius: 50% / 60% 60% 40% 40%;
}

/* Different ellipse on each corner */
.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Tip: The slash syntax is how CSS generators create organic blob shapes. Experiment with large percentage values on both sides of the slash to get interesting organic forms.

Common UI patterns

Pattern	Value	Use case
Slight rounding	4px	Input fields, small badges
Standard card	8px – 12px	Cards, modals, dropdowns
Large card	16px – 24px	Feature sections, hero cards
Pill button	999px	Tags, chips, CTAs
Circle avatar	50%	Profile images, icon buttons
Toast/badge	6px	Notifications, labels

Border-radius and overflow

Applying border-radius alone does not clip child content to the rounded shape. If a child element bleeds outside the rounded corners, add overflow: hidden to the parent.

.card {
  border-radius: 12px;
  overflow: hidden; /* clips image/content to rounded corners */
}

.card img {
  width: 100%;
  display: block;  /* removes inline image gap */
}

Animating border-radius

border-radius is animatable. You can transition between shapes smoothly, which is useful for hover effects and loading states.

.button {
  border-radius: 4px;
  transition: border-radius 0.2s ease;
}

.button:hover {
  border-radius: 20px;
}

/* Morphing blob animation */
@keyframes morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

Generate border-radius values visually

Skip writing values by hand. Our Border Radius Generator lets you drag corners and copy the exact CSS you need.

Open Border Radius Generator →