Border Radius Generator: Create Perfect Rounded Corners

What Is Border Radius?

border-radius is a CSS property that rounds the corners of an element. It's one of the most frequently used properties in modern web design — found in buttons, cards, modals, avatars, input fields, and virtually every UI component with softened edges. Despite its simplicity, border-radius has surprising depth once you explore individual corner control, elliptical radii, and responsive behavior.

The property accepts length values (px, em, rem) and percentage values. A single value applies uniformly to all four corners. Multiple values let you control each corner independently. And slash-separated values create elliptical rather than circular corners.

Visual Comparison: How Different Values Look

The best way to understand border-radius is to see it. Here's how the same 60×60px square looks at different radius values:

Common Value Ranges and Their Feel

Most design systems in 2026 use 8px or 12px as their base border-radius, with a scale that doubles or halves from there (4px, 8px, 16px, 24px). This creates visual consistency while allowing hierarchy through corner sharpness.

From Square to Circle: The Percentage Journey

Percentage values behave differently than pixel values because they're relative to the element's dimensions. This creates some interesting effects:

The key insight: border-radius: 50% on a square creates a circle, but on a rectangle it creates a pill (stadium) shape. This is because 50% of the width and 50% of the height are different values, producing an ellipse on each corner. This is the foundation of many modern UI elements — pill-shaped buttons, chips, tags, and notification badges.

Single-Corner Control: Precision Where It Matters

Sometimes you don't want uniform corners. Maybe you want a card with rounded bottom corners and sharp top corners, or a tooltip with only the bottom-left corner rounded. CSS gives you four individual properties:

/* Individual corner properties */
.element {
  border-top-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
}

/* Equivalent shorthand (clockwise from top-left) */
.element {
  border-radius: 20px 0 20px 0;
}

Shorthand Value Patterns

The two-value pattern (opposite corners matching) is particularly useful for creating tab-like shapes and asymmetric UI elements. The three-value pattern is less common but creates an interesting visual where only one corner differs from its neighbors.

Elliptical Corners: The Slash Notation

Most developers only use border-radius with single values, creating circular corner arcs. But the property supports elliptical arcs through slash notation:

/* Circular corners (same radius in both directions) */
.card { border-radius: 20px; }

/* Elliptical corners (wider than tall) */
.card { border-radius: 40px / 20px; }

/* Super elliptical — wide and shallow */
.banner { border-radius: 100px / 20px; }

The value before the slash controls the horizontal radius, and the value after controls the vertical radius. This lets you create corners that are much wider than they are tall, or vice versa — perfect for banners, ribbons, and decorative elements that need an unusual shape.

You can combine elliptical notation with per-corner values for maximum control:

/* Each corner gets its own elliptical shape */
.element {
  border-radius: 30px 10px 30px 10px / 10px 30px 10px 30px;
}

Border Radius on Images

Applying border-radius to images is just as easy as applying it to any other element:

/* Simple rounded corners on an image */
img.rounded {
  border-radius: 12px;
}

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

One gotcha: if the image hasn't loaded yet or its dimensions are unknown, the border-radius won't be visible until the image renders. To prevent layout shifts, always set explicit dimensions on images with border-radius, or wrap them in a container with fixed dimensions and overflow: hidden.

Responsive Border Radius

Hardcoded pixel values work fine for fixed-width layouts, but responsive designs benefit from fluid border-radius values. Here are several approaches:

Using Clamp for Fluid Radius

/* Scales between 4px and 16px based on viewport width */
.card {
  border-radius: clamp(4px, 2vw, 16px);
}

/* More dramatic scaling */
.hero-image {
  border-radius: clamp(8px, 5vw, 40px);
}

clamp() is ideal here because it sets a minimum (never too sharp), a preferred fluid value, and a maximum (never too round) — all in one declaration.

Container Queries and Border Radius

/* Adjust radius based on container size, not viewport */
@container (min-width: 400px) {
  .card {
    border-radius: 16px;
  }
}

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

Container queries let border-radius respond to the card's container width rather than the viewport width. This means a card in a narrow sidebar gets smaller radius than the same card in a wide main content area — more contextually appropriate styling.

Border Radius and Overflow

Border-radius visually clips the element's background and border, but it does not automatically clip child content. If you have content that extends beyond the rounded corners (like absolute-positioned elements), you need overflow: hidden:

.card {
  border-radius: 16px;
  overflow: hidden; /* Clips child content to rounded shape */
}

.card .overlay {
  position: absolute;
  /* This overlay won't overflow the rounded corners */
}

This is particularly important for cards with hover overlays, image galleries with rounded containers, and any component where child elements might extend beyond the parent's rounded boundary.

Performance Considerations

Border-radius is one of the most performant CSS properties. It's handled entirely by the GPU compositor in modern browsers and doesn't trigger layout recalculations or repaints when animated (unlike width or box-shadow). Animating border-radius with CSS transitions is smooth and efficient:

.button {
  border-radius: 8px;
  transition: border-radius 0.2s ease;
}

.button:hover {
  border-radius: 20px;
}

Common Design Patterns

Here are the border-radius values behind today's most popular UI patterns:

/* Modern card — 12-16px */
.card { border-radius: 12px; }

/* Primary button — 8px */
.btn-primary { border-radius: 8px; }

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

/* Avatar — 50% on square */
.avatar { border-radius: 50%; }

/* Chat bubble — one corner flat */
.bubble {
  border-radius: 16px 16px 4px 16px;
}

/* Code block — subtle rounding */
pre { border-radius: 6px; }

/* Tooltip — one corner sharp */
.tooltip {
  border-radius: 8px 8px 8px 0;
}

Frequently Asked Questions

Related Articles