CSS Border Radius: The Complete Guide

The border-radius property turns sharp rectangles into circles, pills, cards, and organic blobs — all with one line of CSS. This guide covers every syntax, common shapes, a design system scale, and advanced techniques. Generate it visually? Use the free border radius generator →

The border-radius property

border-radius rounds the corners of any element. It works on divs, images, buttons, inputs — anything with a box model.

/* All four corners, same radius */
border-radius: 12px;

/* Elliptical corners (horizontal / vertical) */
border-radius: 20px / 10px;

/* Individual corners */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

/* Shorthand: top-left, top-right, bottom-right, bottom-left */
border-radius: 12px 0 12px 0;  /* diagonal corners */
border-radius: 20px 20px 0 0;  /* rounded top only */

Common shapes

/* Perfect circle (element must be square) */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Pill / capsule (for buttons) */
.pill {
  border-radius: 9999px;  /* or 100vmax */
  padding: 8px 24px;
}

/* Rounded card */
.card {
  border-radius: 16px;
}

/* Subtle rounding (inputs, small elements) */
.input {
  border-radius: 6px;
}

/* Blob / organic shape */
.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Half circle (top) */
.half-circle {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
}

/* Quarter circle */
.quarter {
  width: 100px;
  height: 100px;
  border-radius: 100% 0 0 0;
}

Live demo

Design system scale

Most design systems use a consistent radius scale. Here's a practical one:

:root {
  --radius-xs: 4px;    /* checkboxes, badges */
  --radius-sm: 6px;    /* inputs, small buttons */
  --radius-md: 8px;    /* cards, dropdowns */
  --radius-lg: 12px;   /* modals, panels */
  --radius-xl: 16px;   /* hero cards, images */
  --radius-2xl: 24px;  /* featured sections */
  --radius-full: 9999px; /* pills, avatars */
}

.btn       { border-radius: var(--radius-sm); }
.card      { border-radius: var(--radius-lg); }
.avatar    { border-radius: var(--radius-full); }
.modal     { border-radius: var(--radius-lg); }

Advanced: elliptical corners

The / syntax lets you set different horizontal and vertical radii for each corner, creating elliptical curves:

/* Horizontal radii / Vertical radii */
border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px;

/* Squircle (iOS-style rounded rectangle) */
.squircle {
  border-radius: 22% 22% 22% 22% / 22% 22% 22% 22%;
  /* Or use a close approximation */
  border-radius: 25%;
}

/* Egg shape */
.egg {
  width: 100px;
  height: 130px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Border-radius with other properties

/* Rounded image */
img {
  border-radius: 12px;
  object-fit: cover;  /* important: prevents stretching */
}

/* Rounded with box-shadow */
.card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;   /* clips child content to the radius */
}

/* Rounded with border */
.outlined {
  border-radius: 12px;
  border: 2px solid #e2e8f0;
}

/* Rounded with gradient border */
.gradient-border {
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #8b5cf6, #06b6d4) border-box;
}

Border-radius in Tailwind CSS

<div class="rounded-lg">12px radius</div>
<img class="rounded-full" />  <!-- circle -->
<button class="rounded-full px-6 py-2">Pill button</button>
<div class="rounded-t-xl">Top corners only</div>

Scale: rounded-none (0), rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px), rounded-full (9999px).

Corners: rounded-t-*, rounded-b-*, rounded-l-*, rounded-r-*, rounded-tl-*, rounded-tr-*, etc.

Common gotchas

• 50% doesn't make a circle on rectangles. border-radius: 50% creates an ellipse on non-square elements. For a true circle, the element must have equal width and height.
• Children overflow rounded corners. Add overflow: hidden to the parent so child elements are clipped to the rounded shape.
• Outline doesn't follow border-radius. In some older browsers, outline stays rectangular. Use box-shadow for focus rings instead: box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5).
• Performance is fine. Unlike box-shadow or filter, border-radius is extremely cheap to render. Use it freely.

FAQ

How do I make a circle with CSS?

Set border-radius: 50% on an element with equal width and height. If the element is not square, 50% creates an ellipse instead.

How do I make a pill button?

Set border-radius: 9999px (or 100vmax). This creates a fully rounded capsule shape regardless of the element's width or height.

What does the slash (/) mean in border-radius?

The slash separates horizontal and vertical radii, creating elliptical corners. For example, border-radius: 20px / 10px makes corners that curve more horizontally than vertically.

Does border-radius affect performance?

No. Border-radius is extremely cheap to render. Unlike box-shadow or filter, you can use it freely without performance concerns.

Related tools