Home› Blog› CSS Border Radius Guide

CSS Border Radius — The Complete Guide

From basic border-radius usage to creative irregular shapes, master every possibility CSS border-radius has to offer.

border-radius is one of the most frequently used CSS properties. It doesn't just soften sharp corners—it can create striking, unconventional shapes. This guide covers every detail of border-radius to help you unlock its full design potential.

1. Basic Syntax

border-radius accepts one to four values, following CSS's corner-assignment rules (clockwise: top-left → top-right → bottom-right → bottom-left):

/* All corners identical */
border-radius: 10px;

/* Top-left/bottom-right — Top-right/bottom-left */
border-radius: 10px 30px;

/* Top-left — Top-right/bottom-left — Bottom-right */
border-radius: 10px 30px 50px;

/* Each corner individually */
border-radius: 10px 30px 50px 70px;

The shorthand value assignment follows the same rules as margin/padding: 1 value = all corners, 2 values = opposite corners match, 3 values = top-left independent, 4 values = each corner independent.

2. Ellipses & Slash Syntax

The true power of border-radius lies in the slash / syntax, which lets you independently control horizontal and vertical radii for each corner to create elliptical corners:

/* Horizontal radius 50px / Vertical radius 20px */
border-radius: 50px / 20px;

/* Each corner set independently */
border-radius: 10px 50px 10px 50px / 50px 10px 50px 10px;

/* Super-ellipse effect */
border-radius: 50% / 50%;
💡 Percentage calculation rules: Horizontal radii are based on element width; vertical radii are based on element height. So border-radius: 50% produces a circle on a square, and an ellipse on a rectangle.

3. Common Shapes in Practice

Circles & Pills

/* Square → Circle */
.circle { width: 100px; height: 100px; border-radius: 50%; }

/* Rectangle → Pill shape */
.pill { width: 160px; height: 50px; border-radius: 9999px; }
Circle
Pill

Leaf Shape

.leaf {
  width: 100px;
  height: 100px;
  background: #06d6a0;
  border-radius: 5px 100px 5px 100px;
}
Leaf

Egg Shape

.egg {
  width: 120px;
  height: 160px;
  background: #1a1d2e;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Egg

Bubble / Chat Bubble

.bubble {
  position: relative;
  background: #06d6a0;
  padding: 16px 24px;
  border-radius: 16px 16px 16px 4px;
  max-width: 300px;
  color: #fff;
}

/* Or use a pseudo-element for the tail */
.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #06d6a0;
}

Diamond

.diamond {
  width: 80px;
  height: 80px;
  background: #06d6a0;
  border-radius: 5px;
  transform: rotate(45deg);
}

4. Independent Corner Control

When you need precise control over individual corners, use the individual properties:

.custom-shape {
  border-top-left-radius: 30px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 50% 20%;
  border-bottom-left-radius: 20px 50%;
}

Individual properties also support slash syntax, allowing different horizontal/vertical radii per corner.

5. border-radius & overflow

border-radius alone doesn't clip content. To make inner content (images, overflowing text, etc.) follow the rounded shape, pair it with overflow: hidden:

.rounded-image {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
}

.rounded-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
⚠️ Note: When child elements have transform, filter, or will-change, overflow: hidden may fail in some browsers. This happens because these properties create new containing blocks.

6. CSS Art & Creative Shapes

Combining border-radius with other CSS properties opens up a world of creative possibilities:

/* Moon */
.moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 #ffd166;
}

/* Heart (using pseudo-elements) */
.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: #1a1d2e;
}
.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

7. Responsive Border Radius

In responsive design, border radius should scale proportionally with element size. Using percentages or clamp() is recommended:

/* Percentage border radius — scales with element size */
.responsive-card {
  border-radius: 2%;
  padding: 5%;
}

/* clamp to avoid too-small or too-large values */
.responsive-btn {
  border-radius: clamp(4px, 2vw, 16px);
}

/* Container query border radius */
@container (min-width: 400px) {
  .card { border-radius: 16px; }
}

8. Recommended Tools

FAQ

What's the difference between border-radius: 50% and border-radius: 9999px?

50% creates an ellipse whose radius is based on the element's actual dimensions. 9999px forces each corner's radius to the maximum available space, so it looks identical to 50% on rectangles, but semantically it means "as round as possible."

Can border-radius use percentages?

Yes. With a single value, the percentage is calculated based on element width. Using slash syntax (e.g., 10% / 20%), the value before the slash controls the horizontal radius (based on width) and the value after controls the vertical radius (based on height).