CSS Border Radius Generator

You need a speech bubble with three rounded corners and one sharp corner. Or a tab shape that’s rounded on top and flat on the bottom. Or that organic blob shape where each corner has a different horizontal and vertical radius — the border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% syntax that nobody can write from memory. You know the property exists, you just can’t hold the clockwise corner order and the h/v split in your head while also thinking about your layout.

Why This Tool (Not DevTools or a Cheat Sheet)

Chrome DevTools lets you tweak border-radius on a live element, but it only shows a single slider for the shorthand value — no individual corner control, no elliptical radii. A CSS cheat sheet tells you the syntax but doesn’t show you what border-radius: 20px 50px 30px 10px / 40px 20px 60px 30px actually looks like until you try it.

This tool gives you per-corner control with linked or independent sliders, supports the elliptical h/v syntax with live preview, and outputs the exact CSS shorthand you need. No save-reload cycle, no guessing. Everything runs in your browser — nothing is sent to a server.

What Is border-radius?

The CSS border-radius property rounds the corners of an element’s border box. It is one of the most-used CSS properties and controls everything from subtle card rounding to pill-shaped buttons and full circles.

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

/* Pill button */
.button { border-radius: 9999px; }

/* Asymmetric corners */
.bubble { border-radius: 16px 16px 16px 0px; }

border-radius has been supported in every major browser for well over a decade and requires no vendor prefixes in modern code.

Shorthand Syntax

Like margin and padding, border-radius uses the same clockwise corner ordering: top-left → top-right → bottom-right → bottom-left.

Rule of thumb: the browser applies the same compression rules as margin — whenever opposite corners are equal, the shorthand collapses to fewer values.

/* These are equivalent: */
border-radius: 8px 12px 8px 12px;
border-radius: 8px 12px;

Elliptical Corners (Slash Notation)

Each corner can have two independent radii: a horizontal radius and a vertical radius. When they differ, the corner forms an arc of an ellipse rather than a circle. The slash syntax separates the horizontal values from the vertical values:

/* Horizontal radii / Vertical radii */
border-radius: 40px 60px / 60px 40px;

The left side of the / lists the horizontal radius for each corner; the right side lists the vertical radius. Shorthand compression applies independently to each side.

/* Egg shape: wide top, narrow bottom */
.egg {
  border-radius: 100px / 160px 160px 40px 40px;
}

/* Blob shape */
.blob {
  border-radius: 80px 40px / 40px 80px;
}

Elliptical radii unlock organic, non-circular shapes. This is the foundation of CSS art and blob generators.

Longhand Properties

The shorthand expands to eight individual properties (four corners × two axes):

/* Top-left corner */
border-top-left-radius: 16px;        /* uniform */
border-top-left-radius: 30px 50px;   /* horizontal vertical */

/* Other corners */
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

Use the longhand when you need to animate a single corner or when CSS custom properties drive individual corners.

Common Patterns

Card with top radius only

.card-header {
  border-radius: 8px 8px 0 0; /* top-left top-right bottom-right bottom-left */
}
.card-body {
  border-radius: 0 0 8px 8px;
}

Chat bubble (no bottom-left corner)

.bubble-sent {
  border-radius: 16px 16px 0 16px;
}
.bubble-received {
  border-radius: 16px 16px 16px 0;
}

Pill button (fully rounded)

.pill-button {
  border-radius: 9999px; /* large value clamps to 50% of element size */
}

Circle (requires square element)

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

Using 50% makes a circle regardless of element size. A fixed pixel value like 24px only works when you know the exact dimensions.

Responsive rounding with clamp()

.card {
  border-radius: clamp(4px, 1vw, 16px);
}

The radius scales with the viewport width, staying between 4px and 16px.

Animating border-radius

border-radius is animatable in CSS. You can transition between shapes for interactive effects:

.card {
  border-radius: 8px;
  transition: border-radius 0.3s ease;
}
.card:hover {
  border-radius: 24px;
}

For organic morphing animations, use @keyframes with different elliptical shapes:

@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

.blob {
  animation: morph 8s ease-in-out infinite;
}

Browser Support and Performance

border-radius is universally supported — no vendor prefixes required in any modern browser. Rounding corners is composited by the GPU and has negligible performance cost. Avoid animating border-radius on large elements or in tight loops, as it forces a repaint.

Frequently Asked Questions

What is the difference between border-radius: 50% and border-radius: 9999px? 50% creates a perfect circle for any square element, and an ellipse for rectangular elements. 9999px (or any very large value) is clamped to half the element’s size — it produces a pill shape on wide elements and a circle on square ones. Use 50% for profile pictures; use 9999px for pill buttons.

How do I round only specific corners? Use the longhand properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, or set unused corners to 0 in the shorthand: border-radius: 0 8px 8px 0 rounds only the right two corners.

Can I use border-radius with border-image? No. border-image overrides border-style, which disables border-radius clipping. Use outline or box-shadow instead for decorative borders on rounded elements.

What does the slash notation do? The slash separates the horizontal and vertical radii for each corner. border-radius: 40px 60px / 20px 30px sets TL horizontal=40px, TR horizontal=60px, TL vertical=20px, TR vertical=30px. This produces elliptical arc corners instead of circular ones.

Can I animate border-radius? Yes. border-radius is listed in the CSS Transitions spec as an animatable property. You can use transition or @keyframes to morph shapes smoothly.

Does this tool send my data to a server? No. All border-radius computation and preview rendering happens entirely in your browser. Nothing is sent to any server.