CSS Border-Radius: The Ultimate Guide to Rounded Corners in 2026

A complete guide to CSS border-radius covering syntax, the shorthand four-value form, elliptical corners with the slash notation, practical shapes, and performance tips.

The border-radius property is one of the most-used CSS properties in modern web design. It rounds the corners of an element's outer border edge, enabling everything from subtle card rounding to perfect circles and complex organic shapes — all without a single image or SVG.

This guide covers everything from the basics to advanced techniques, with copy-paste examples throughout.

Basic Syntax

The simplest use sets all four corners to the same radius:

/* All four corners equal */
.card {
  border-radius: 8px;
}

/* Percentage — relative to element dimensions */
.avatar {
  border-radius: 50%; /* perfect circle if width === height */
}

The Four-Value Shorthand

Like margin and padding, border-radius follows the top-right-bottom-left (clockwise) order:

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 4px 8px 12px 16px;

/* top-left & bottom-right | top-right & bottom-left */
border-radius: 4px 8px;

/* top-left | top-right & bottom-left | bottom-right */
border-radius: 4px 8px 12px;

Longhand Properties

Each corner has its own property, useful for animations and overrides:

.element {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 0;
}

Elliptical Corners: The Slash Notation

The slash notation is one of CSS border-radius's most underused features. It lets you set different horizontal and vertical radii for each corner, creating elliptical rather than circular rounding:

/* horizontal-radius / vertical-radius */
border-radius: 50px / 20px;

/* Each corner with elliptical radii */
/* top-left-h top-right-h bottom-right-h bottom-left-h /
   top-left-v top-right-v bottom-right-v bottom-left-v */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;

This is how designers create leaf shapes, speech bubble tails, and fluid organic designs in pure CSS.

Common Shapes with Border-Radius

Perfect Circle

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #0070DC;
}

Pill / Capsule Button

.pill {
  padding: 12px 28px;
  border-radius: 9999px; /* or 100vw — any large value */
  background: #0070DC;
  color: #fff;
}

Leaf Shape

.leaf {
  width: 100px;
  height: 100px;
  border-radius: 0 50% 0 50%;
  background: #22c55e;
  transform: rotate(45deg);
}

Semi-circle

/* Top semi-circle */
.semi-circle {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #f59e0b;
}

/* Bottom semi-circle */
.semi-circle-bottom {
  border-radius: 0 0 100px 100px;
}

Teardrop

.teardrop {
  width: 80px;
  height: 80px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #ef4444;
}

Animating Border-Radius

Border-radius is fully animatable with CSS transitions and animations. This creates the popular "blob" effect:

.blob {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%  { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50%  { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75%  { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

Border-Radius with Images

Applying border-radius to <img> elements works but requires overflow: hidden on the container if using it in some older browsers. The modern approach:

/* Direct on img — works in all modern browsers */
img.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover; /* crucial for non-square images */
}

/* Container approach for older browser compatibility */
.avatar-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Border-Radius with Border and Box-Shadow

Both border and box-shadow follow the rounded shape automatically:

.card {
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  /* Both border and shadow respect the radius */
}

Using Border-Radius in Tailwind CSS

Tailwind's border-radius utilities map directly to CSS values:

<!-- Tailwind equivalents -->
rounded-none   → border-radius: 0
rounded-sm     → border-radius: 0.125rem (2px)
rounded        → border-radius: 0.25rem (4px)
rounded-md     → border-radius: 0.375rem (6px)
rounded-lg     → border-radius: 0.5rem (8px)
rounded-xl     → border-radius: 0.75rem (12px)
rounded-2xl    → border-radius: 1rem (16px)
rounded-3xl    → border-radius: 1.5rem (24px)
rounded-full   → border-radius: 9999px

Browser Support

border-radius has universal browser support — 100% across Chrome, Firefox, Safari, Edge, and all mobile browsers. The prefixed versions (-webkit-border-radius, -moz-border-radius) haven't been needed since 2013. Drop them from your codebase.

Performance Considerations

Animating border-radius triggers paint and composite operations — fine for individual elements, potentially expensive on many elements simultaneously
For blur effects behind rounded elements, use backdrop-filter carefully as it's GPU-intensive
Prefer percentage values for responsive designs rather than fixed px values that need media query overrides

Conclusion

CSS border-radius is deceptively powerful. Beyond simple rounded card corners, the slash notation opens up elliptical shaping, and combined with animations you can create fluid organic designs entirely in CSS. Master the four-value shorthand, learn the slash notation, and you'll rarely need to reach for SVG or images for common shapes.