RADCSS Border Radius Generator

CSS border-radius Complete Guide

CSS border-radius is the property that rounds element corners — a cornerstone of modern UI design for cards, buttons, avatars, and badges. A single line of CSS transforms hard rectangles into friendly, polished shapes. This tool lets you preview results in real time as you adjust sliders and instantly copy the generated value.

Understanding border-radius Syntax

Single Value — All Four Corners

The simplest form applies one value equally to all four corners.

.card {
  border-radius: 16px; /* all corners equal */
}

.avatar {
  border-radius: 50%; /* perfect circle */
}

Two Values — Diagonal Pairs

Two values apply the first to top-left + bottom-right, and the second to top-right + bottom-left.

.badge {
  border-radius: 20px 4px; /* diagonal pairs */
}

Four Values — Individual Corners

Four values follow clockwise order: top-left, top-right, bottom-right, bottom-left.

.blob {
  border-radius: 30px 70px 50px 10px;
  /* TL=30, TR=70, BR=50, BL=10 */
}

/* Longhand equivalents */
.custom {
  border-top-left-radius: 10px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 40px;
}

Practical Examples — Cards, Buttons, Avatars

Card Component

.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  padding: 24px;
  background: white;
}

/* Image card — round top only */
.card-image {
  border-radius: 12px 12px 0 0;
}

Button Styles

/* Default button */
.btn { border-radius: 6px; }

/* Pill button */
.btn-pill { border-radius: 9999px; }

/* Icon button (circle) */
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

Avatars and Badges

/* Circular avatar */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

/* Squircle avatar */
.avatar-square {
  border-radius: 8px;
}

Browser Compatibility and Caveats

Browser Support

border-radius is supported in IE9+ and all modern browsers. The old -webkit-border-radius and -moz-border-radius prefixes are no longer needed — the standard property works everywhere.

Using with overflow: hidden

When child elements overflow rounded corners, add overflow: hidden to the parent. This is commonly needed for image cards.

.card {
  border-radius: 12px;
  overflow: hidden; /* clip children to rounded corners */
}

Frequently Asked Questions

What is the difference between 50% and 9999px?

50% is relative to element size, so it only creates a perfect circle on square elements — on rectangles it creates an ellipse. A large px value like 9999px creates a pill shape (half-circles on left and right).

What is the slash (/) syntax?

border-radius: 50px / 20px sets horizontal and vertical radii separately, creating elliptical corners. Great for decorative blob shapes.

Does border-radius affect performance?

border-radius alone has minimal performance cost. Combining it with box-shadow on many elements can trigger GPU layer creation — avoid excessive use in long lists or animations.

Can I use CSS variables?

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

.btn { border-radius: var(--radius-md); }
.card { border-radius: var(--radius-lg); }

How does it map to Tailwind CSS?

Tailwind provides rounded, rounded-md, rounded-lg, and rounded-full utilities. rounded-full maps to border-radius: 9999px.