$' '

CSS Border Radius Guide: Rounded Corners, Pill Shapes & Creative Effects

Q: How do I make a div perfectly round in CSS?

Set border-radius to 50% on a square element: .circle { width: 100px; height: 100px; border-radius: 50%; }. The element must have equal width and height. If the dimensions differ, border-radius: 50% creates an ellipse instead of a circle. For guaranteed circles, use a specific value like border-radius: 9999px on a square element.

Q: Can I set different border-radius values for each corner?

Yes. You can set up to four values: border-radius: top-left top-right bottom-right bottom-left. For example, border-radius: 10px 0 10px 0 rounds only the top-left and bottom-right corners. You can also use individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Q: How do I create a pill-shaped button in CSS?

Use border-radius: 9999px (or a large value) on your button element. This ensures the corners are as round as possible given the element's height, creating a pill/capsule shape regardless of the button's width: .pill-btn { border-radius: 9999px; padding: 8px 24px; }.

Rounded corners have been a staple of modern web design for over a decade. The CSS border-radius property transforms sharp-edged boxes into smooth, approachable shapes — from subtle corner softening to perfect circles and organic blobs. This guide covers everything from basic syntax to advanced techniques, with practical examples you can use in your projects today.

What Is CSS Border Radius?

The border-radius property rounds the corners of an element's outer border edge. It works on any element with a visible background, border, or box-shadow. The radius value defines the size of the circle (or ellipse) used to round each corner.

Border Radius Syntax

Shorthand Property

/* One value — all four corners */
border-radius: 16px;

/* Two values — top/bottom pairs */
border-radius: 16px 8px;
/* top-left + bottom-right = 16px, top-right + bottom-left = 8px */

/* Three values */
border-radius: 16px 8px 4px;
/* top-left=16, top-right=8, bottom-right=4, bottom-left=8 */

/* Four values — each corner */
border-radius: 16px 8px 4px 2px;
/* top-left, top-right, bottom-right, bottom-left (clockwise) */

Elliptical Corners (Slash Syntax)

Use the slash to set horizontal and vertical radii separately, creating elliptical corners:

/* Elliptical: horizontal / vertical */
border-radius: 50% / 30%;
/* Each corner is a 50% wide, 30% tall ellipse */

/* Per-corner elliptical */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Individual Corner Properties

border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

Common Border Radius Patterns

1. Slight Rounding

4–8px for a subtle, professional feel. Commonly used on cards, inputs, and buttons.

border-radius: 8px;

4px

8px

2. Moderate Rounding

12–20px for a friendly, modern look. Popular in contemporary UI frameworks.

border-radius: 16px;

16px

3. Pill / Capsule Shape

Use a very large value (9999px is a common convention) to create pill shapes. The browser clamps the radius to the largest possible curve.

.pill { border-radius: 9999px; }
/* Works on buttons, tags, badges, and any rectangular element */

Pill Shape

4. Perfect Circle

Set border-radius: 50% on a square element to create a circle. On non-square elements, it creates an ellipse.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Circle

5. Ticket / Card Notch

Round only the top corners to create a ticket-like or tab-like appearance.

.ticket {
  border-radius: 12px 12px 0 0;
}

6. Organic Blob Shape

Use the elliptical slash syntax to create organic, amoeba-like shapes:

.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Blob

7. Leaf / Teardrop Shape

Round three corners and leave one sharp:

.leaf {
  border-radius: 0 50% 50% 50%;
}

Leaf

Border Radius with Other Properties

With Box Shadow

Box shadows automatically follow the border-radius curve, so rounded elements get rounded shadows:

.card {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

With Borders

Borders also follow the border-radius. Thin borders on rounded elements create a clean, defined edge:

.outlined {
  border-radius: 12px;
  border: 2px solid #6366f1;
}

With Overflow Hidden

Border-radius clips content inside the element when combined with overflow: hidden. This is essential for rounded images and containers:

.rounded-image {
  border-radius: 16px;
  overflow: hidden;
}
.rounded-image img {
  width: 100%;
  display: block;
}

With Gradients

Background gradients are also clipped by border-radius, so rounded gradient backgrounds work automatically:

.gradient-card {
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
}

Real-World Use Cases

Avatar Circles

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

Tag / Badge Pills

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.15);
  color: #a78bfa;
  font-size: 0.85rem;
}

Chat Bubbles

.bubble-sent {
  border-radius: 16px 16px 4px 16px;
  background: #6366f1;
}
.bubble-received {
  border-radius: 16px 16px 16px 4px;
  background: #1e293b;
}

Modal / Dialog Windows

.modal {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

Responsive Border Radius

Consider using relative units for border-radius in responsive designs:

/* Fluid rounding */
.card {
  border-radius: clamp(8px, 2vw, 24px);
}

/* Container-relative */
.container {
  border-radius: min(16px, 5%);
}

Frequently Asked Questions

How do I make a div perfectly round in CSS?

Set border-radius: 50% on a square element. The element must have equal width and height. If the dimensions differ, border-radius: 50% creates an ellipse instead of a circle. For guaranteed circles, use a specific large value like border-radius: 9999px on a square element.

Can I set different border-radius values for each corner?

Yes. You can set up to four values: border-radius: top-left top-right bottom-right bottom-left. For example, border-radius: 10px 0 10px 0 rounds only the top-left and bottom-right corners. You can also use individual properties like border-top-left-radius.

What is the maximum value for border-radius in CSS?

There is no hard maximum value. When border-radius exceeds half the element's width or height, the browser clamps it to create the largest possible curve. Using a very large value like 9999px is a common trick to create pill shapes without needing to know the exact element dimensions.

How do I create a pill-shaped button in CSS?

Use border-radius: 9999px (or a large value) on your button element. This ensures the corners are as round as possible given the element's height, creating a pill/capsule shape regardless of the button's width: .pill-btn { border-radius: 9999px; padding: 8px 24px; }.

🔲 Design rounded corners visually. Try our free Border Radius Generator — adjust each corner independently and copy the CSS.

Related Tools

Border Radius Generator

Visual corner designer with live preview

Box Shadow Generator

Add depth to your rounded elements

Color Converter

Find the perfect colors for your UI