What is CSS border-radius?

CSS border-radius rounds the corners of an element's outer border edge. You can set uniform rounding for all corners or specify different values for each corner. Values can be in pixels (fixed size) or percentages (relative to element dimensions).

How do I make a circle in CSS?

Set border-radius: 50% on a square element (equal width and height). For example: width: 100px; height: 100px; border-radius: 50%. This creates a perfect circle. On non-square elements, 50% creates an ellipse.

What is the border-radius shorthand?

border-radius shorthand accepts 1-4 values in clockwise order starting from top-left: border-radius: top-left top-right bottom-right bottom-left. One value sets all corners, two values set top-left/bottom-right and top-right/bottom-left pairs.

Should I use px or % for border-radius?

Use px for fixed radius values that stay consistent regardless of element size. Use % for responsive designs where the radius should scale with the element. 50% is commonly used for circles. Most design systems use px for consistent UI components.

Can I create elliptical corners?

Yes, use the slash notation: border-radius: 50px / 25px. The first value is the horizontal radius and the second is the vertical radius. Each corner can have its own elliptical values for complex shapes.

Does border-radius affect the element's content?

Yes, border-radius clips the element's content at the rounded corners. Child elements, backgrounds, and images inside the element will be clipped. Use overflow: hidden to ensure clean clipping of child content.

CSS Border Radius Guide (2026)

1. What Is border-radius?

The CSS border-radius property rounds the corners of an element's outer border edge. It transforms rectangular elements into shapes with rounded or circular corners. Before CSS3 introduced border-radius, developers used background images or nested elements to achieve rounded corners -- a tedious and inflexible approach.

Today, border-radius is universally supported and used extensively in modern web design for cards, buttons, avatars, badges, modals, and virtually every UI component.

Why Rounded Corners Matter

Friendlier UI: Rounded corners are perceived as more approachable and less aggressive than sharp corners
Natural look: Physical objects rarely have perfectly sharp corners, so rounding feels more natural
Content containment: Rounded corners help visually contain content within card-like structures
Design consistency: A shared border-radius value creates visual consistency across components
Eye tracking: Studies suggest rounded corners facilitate smoother eye movement into content areas

2. border-radius Syntax

The border-radius property accepts length values (px, em, rem) or percentages. It can take 1 to 4 values:

/* Single value: all corners */
border-radius: 10px;

/* Two values: top-left/bottom-right, top-right/bottom-left */
border-radius: 10px 20px;

/* Three values: top-left, top-right/bottom-left, bottom-right */
border-radius: 10px 20px 30px;

/* Four values: top-left, top-right, bottom-right, bottom-left */
border-radius: 10px 20px 30px 40px;

Elliptical Radius

Use a slash to specify different horizontal and vertical radii:

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

/* Each corner with horizontal / vertical */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;

3. Shorthand Notation

Understanding the shorthand is essential for writing concise CSS. The order follows the clock: top-left, top-right, bottom-right, bottom-left.

/* All corners 10px */
border-radius: 10px;
/* Equivalent to: 10px 10px 10px 10px */

/* Horizontal pairs */
border-radius: 10px 20px;
/* Top-left & bottom-right: 10px
   Top-right & bottom-left: 20px */

/* Three values */
border-radius: 10px 20px 30px;
/* Top-left: 10px
   Top-right & bottom-left: 20px
   Bottom-right: 30px */

/* Four values (most explicit) */
border-radius: 10px 20px 30px 40px;
/* Top-left: 10px, Top-right: 20px
   Bottom-right: 30px, Bottom-left: 40px */

4. Individual Corner Control

For maximum control, use the individual corner properties:

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

/* Elliptical individual corners */
border-top-left-radius: 50px 25px;
border-bottom-right-radius: 0;

When to Use Longhand

Use longhand properties when you need to override a single corner without affecting others, especially in responsive designs or component variants:

.card {
  border-radius: 12px;
}

.card--top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

5. Pixels vs Percentages

The unit you choose significantly affects how border-radius behaves across different element sizes.

Pixel Values (px)

/* Fixed 8px radius regardless of element size */
.button-small { width: 80px; height: 32px; border-radius: 8px; }
.button-large { width: 200px; height: 48px; border-radius: 8px; }
/* Both have identically-sized corners */

Percentage Values (%)

/* 50% = circle on square, ellipse on rectangle */
.avatar { width: 48px; height: 48px; border-radius: 50%; }

/* 25% scales with element */
.card-small { width: 200px; height: 150px; border-radius: 25%; }
.card-large { width: 400px; height: 300px; border-radius: 25%; }
/* Corners scale proportionally */

Which to Use?

Use px for consistent UI components (buttons, cards, inputs) where you want the same corner appearance regardless of size. Use % for avatars, circles, or elements where the rounding should scale with the element. Most design systems define border-radius tokens in pixels.

6. Creating Circles and Ellipses

CSS border-radius can create perfect circles and ellipses without any additional markup.

Perfect Circle

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

/* Avatar circle */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden; /* Clip image to circle */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Ellipse

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  /* 50% on a non-square creates an ellipse */
}

/* Custom elliptical corners */
.organic {
  width: 200px;
  height: 150px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Pill / Capsule Shape

.pill {
  padding: 8px 24px;
  border-radius: 9999px; /* Very large value = pill */
}

/* Alternative */
.pill-alt {
  height: 40px;
  border-radius: 20px; /* Half the height = pill */
}

7. Creative Shapes

Asymmetric border-radius values create organic, creative shapes:

/* Leaf shape */
.leaf {
  width: 150px;
  height: 150px;
  border-radius: 0 50% 0 50%;
  background: #22c55e;
}

/* Drop shape */
.drop {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 0;
  background: #3b82f6;
  transform: rotate(-45deg);
}

/* Blob */
.blob {
  width: 200px;
  height: 200px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Speech bubble corner */
.speech {
  border-radius: 20px 20px 20px 0;
  padding: 1rem;
  background: #e5e7eb;
}

8. Border Radius in Design Systems

Design systems use CSS custom properties to define consistent border-radius tokens:

:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

.button { border-radius: var(--radius-md); }
.card { border-radius: var(--radius-lg); }
.avatar { border-radius: var(--radius-full); }
.input { border-radius: var(--radius-md); }
.modal { border-radius: var(--radius-xl); }
.badge { border-radius: var(--radius-full); }

Tailwind CSS Radius Scale

/* Tailwind's default border-radius scale */
rounded-none  = 0px
rounded-sm    = 0.125rem (2px)
rounded       = 0.25rem  (4px)
rounded-md    = 0.375rem (6px)
rounded-lg    = 0.5rem   (8px)
rounded-xl    = 0.75rem  (12px)
rounded-2xl   = 1rem     (16px)
rounded-3xl   = 1.5rem   (24px)
rounded-full  = 9999px

9. Responsive Border Radius

Adjust border-radius at different breakpoints for optimal appearance on mobile and desktop:

.card {
  border-radius: 8px;
}

@media (min-width: 768px) {
  .card {
    border-radius: 16px;
  }
}

/* Full-width mobile cards often remove top rounding */
@media (max-width: 640px) {
  .card--full {
    border-radius: 0;
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

Container Queries

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

@container (max-width: 399px) {
  .card {
    border-radius: 8px;
  }
}

10. Best Practices

Use design tokens: Define border-radius values as CSS custom properties for consistency
Match related elements: Buttons, inputs, and selects in a form should share the same border-radius
Nested rounding: Inner elements need a smaller radius than outer containers (outer radius minus padding)
Use overflow: hidden: When content or images inside a rounded element need to respect the rounding
Avoid excessive rounding: Very large border-radius on small elements can look distorted
Consider border-width: The radius applies to the outer edge of the border, so thick borders reduce the visible inner rounding

Nested Border Radius

/* Correct nested radius: inner = outer - padding */
.outer {
  border-radius: 16px;
  padding: 8px;
}

.inner {
  border-radius: 8px; /* 16px - 8px */
}

/* Wrong: same radius looks mismatched */
.outer-bad {
  border-radius: 16px;
  padding: 8px;
}

.inner-bad {
  border-radius: 16px; /* Too much - corners don't align */
}

11. Using Our Border Radius Generator

Our free CSS Border Radius Generator lets you create rounded corners visually and export production-ready CSS.

Key Features

Visual preview: Large preview box shows the border-radius in real time
Individual corners: Link/unlink mode for uniform or individual corner control
px or % units: Toggle between pixel and percentage values
Box customization: Adjust box size, background color, and border color
12 presets: Rounded, Pill, Circle, Square, Leaf, Drop, and more
Shorthand + longhand output: Both CSS formats are generated
One-click copy: Copy CSS to clipboard instantly

Design Perfect Rounded Corners

Create CSS border-radius visually with our free generator. Adjust each corner, switch between px and %, and copy production-ready CSS -- all in your browser.

Try the Border Radius Generator

CSS Border Radius Guide: Rounded Corners Made Easy (2026)