Modern CSS Tools
Quick Answer

The CSS border-radius property accepts up to eight values separated by a slash — four horizontal radii and four vertical radii. Most developers only ever use one value, missing out on elliptical corners and organic blob shapes. This generator gives you both: a simple 4-corner editor for everyday rounding, and an advanced 8-value editor for free-form shapes that morph cleanly when animated.

Border Radius Generator

Updated

border-radius is one of the most-used CSS properties — but most developers only ever write border-radius: 8px and call it a day. The full syntax is much more powerful: each corner can have a different horizontal and vertical radius, allowing you to create everything from subtle rounded corners to organic blob shapes. This generator gives you both modes: a simple 4-corner editor for everyday use, and an advanced 8-value editor for creative freeform shapes. Output works in any browser.

The 8-value syntax is one of the most under-used parts of CSS. There was a wave of "blobby" landing pages around 2020 that briefly made tools like fancy-border-radius from 9elements popular, then the design trend faded and most generators stopped including the syntax. That was a mistake. The 8-value form is genuinely useful for image masks, decorative card corners, and any shape that needs to feel hand-drawn rather than CAD-precise. The full reference is on MDN's border-radius page, and the algorithm for clamping oversized radii is specified in CSS Backgrounds and Borders Module Level 3 — corner overlap.

What is border-radius?

The CSS border-radius property rounds the corners of an element's outer border edge. It is one of the most frequently used CSS properties — nearly every modern UI features rounded corners on buttons, cards, inputs, and images. While most developers use a single value like border-radius: 8px, the full syntax is significantly more powerful and supports up to eight values separated by a forward slash (/).

The values before the slash define the horizontal radii for each corner in clockwise order: top-left, top-right, bottom-right, bottom-left. The values after the slash define the vertical radii in the same order. When horizontal and vertical radii differ for a corner, the result is an elliptical curve rather than a circular one. This is how designers create organic, blob-like shapes that go far beyond simple rounded rectangles. You can also use shorthand forms: a single value applies to all four corners, two values set top-left/bottom-right and top-right/bottom-left respectively, and three values set top-left, then top-right/bottom-left together, then bottom-right.

The border-radius property also affects the clipping of the element's content, background, and any box-shadow applied to it. When you round the corners of a container, the background and any overflow content are clipped to the rounded shape. This is why border-radius: 50% on a square element creates a circle — the background is clipped to the elliptical (in this case, circular) boundary defined by the radii. Understanding this clipping behavior is important when working with images, backgrounds, and overflow content inside rounded elements.

How to use this tool

Start in Simple mode for everyday rounded corners: drag the four sliders to set each corner independently, or check "Link all corners" to adjust all four at once. Switch to Advanced mode when you need creative freeform shapes — you get eight sliders controlling both the horizontal and vertical radius of each corner independently. Choose your preferred unit (px, %, or rem) from the dropdown. The preview box updates in real time, and both CSS outputs are always ready to copy.

The Simple mode is ideal for common UI tasks like rounding card corners, creating pill buttons, or making circular avatars. The Advanced mode unlocks the full 8-value syntax, which is necessary for creating asymmetric shapes, organic blobs, and creative design elements. Experiment with setting very different horizontal and vertical values on opposite corners to see how the shape morphs. The preview updates instantly, making it easy to iterate until you find exactly the shape you want.

Practical examples

Pill-shaped buttons and tags

Pill shapes are fully rounded on the left and right sides, creating a capsule-like appearance. The trick is to use a border-radius value that is larger than half the element's height. Using 9999px ensures the pill shape works at any size without needing to know the exact height.

.pill-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  background: #7c9eff;
  color: #0f0f11;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: #1e293b;
  color: #94a3b8;
  font-size: 0.75rem;
}

Organic blob shapes with 8-value syntax

By setting different horizontal and vertical radii for each corner, you can create organic, asymmetric shapes that feel natural and playful. These blob shapes are popular for decorative backgrounds, avatars, and hero sections.

.blob {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #7c9eff, #4ade80);
  border-radius: 70% 30% 50% 50% / 30% 50% 50% 70%;
}

.blob-alt {
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, #f472b6, #7c9eff);
  border-radius: 40% 60% 65% 35% / 55% 35% 65% 45%;
}

/* Animate between blob shapes on hover */
.blob-animated {
  border-radius: 70% 30% 50% 50% / 30% 50% 50% 70%;
  transition: border-radius 0.6s ease;
}

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

Asymmetric card corners for design accents

Instead of rounding all corners equally, selectively rounding specific corners creates a distinctive design language. This technique works well for cards, image containers, and feature callouts.

/* Round only the top corners */
.card-top-rounded {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* Accent corner — one large rounded corner */
.card-accent {
  border-radius: 4px 4px 32px 4px;
  padding: 2rem;
  background: #1e293b;
}

/* Diagonal rounding — opposite corners */
.card-diagonal {
  border-radius: 24px 4px 24px 4px;
  padding: 2rem;
  background: #1e293b;
}

/* Image with one rounded corner for editorial look */
.editorial-image {
  border-radius: 0 0 48px 0;
  overflow: hidden;
}

Common patterns and best practices

Follow these guidelines to use border-radius effectively across your designs:

Browser Support

Common Pitfalls

FAQ

What does the slash (/) mean in border-radius?

The slash separates the horizontal radii from the vertical radii. For example, border-radius: 50% 50% 50% 50% / 30% 30% 70% 70% means all four corners have a 50% horizontal radius, but the top corners have a 30% vertical radius and the bottom corners have a 70% vertical radius. This creates an elliptical curve at each corner rather than a circular one, which is the key to creating organic blob shapes with pure CSS.

How do I create a perfect circle?

To create a perfect circle, set border-radius: 50% on an element that has equal width and height (a square). You can also use border-radius: 9999px to create a pill shape that works on any rectangle — the browser clamps the radius to half the shortest side, so you always get the maximum possible rounding regardless of the element's dimensions.

Why does my element not become a perfect circle with border-radius: 50%?

The element must have equal width and height for border-radius: 50% to produce a circle. If the width and height differ, 50% creates an ellipse instead, because the horizontal radius is 50% of the width and the vertical radius is 50% of the height — two different values. To fix this, set both dimensions to the same value, or use aspect-ratio: 1 to enforce a square aspect ratio. For example, width: 100px; aspect-ratio: 1; border-radius: 50%; always produces a perfect circle.

Can I animate border-radius?

Yes, border-radius is fully animatable with CSS transitions and animations. The browser smoothly interpolates between the start and end radius values, making it easy to create morphing shape effects on hover or state changes. For example, you can transition from a rounded rectangle to a circle on hover, or animate between two different blob shapes using @keyframes. All eight values (four horizontal and four vertical radii) are interpolated independently, enabling complex morphing effects.

What is the maximum value for border-radius?

There is no fixed maximum value. If the combined radii of two adjacent corners on the same edge exceed that edge's length, the browser proportionally reduces all radii until they fit within the element's dimensions. This is defined in the CSS specification as the "corner curve overlap" algorithm. In practice, this means border-radius: 9999px safely creates the maximum possible rounding on any element — the browser clamps it down to the actual available space automatically. You never need to worry about setting a value that is "too large."

Related guides

Related tools