CSS Border Radius Generator: Stop Eyeballing Your Rounded Corners

There's a particular kind of frustration that comes from staring at a button and thinking "that's not quite right" — and not being able to articulate why. Nine times out of ten, it's the border radius. Too sharp and it looks corporate and cold. Too round and it starts looking like a pill capsule when you didn't want that. Getting it right without a visual tool is a lot of guessing.

That's what the CSS Border Radius Generator is for. But before you go click values at random, it helps to actually understand what border-radius does under the hood. Because once you do, you'll stop treating it as a magic number and start using it intentionally.

Why Border Radius Matters More Than You Think

Rounded corners aren't just decoration. They carry meaning.

Sharp corners feel rigid, authoritative, clinical. Medical dashboards and legal software have been using sharp corners for decades — not by accident. Rounded corners feel approachable, modern, friendly. That's why consumer apps lean toward them. The degree of rounding signals a lot: subtle rounding says "polished professional," heavy rounding says "friendly and casual," and full pill shapes scream "call to action" or "tag."

There's also a practical reason: rounded corners help the eye track boundaries more easily. A card with 8px rounded corners is easier to perceive as a unit than one with sharp corners. Gestalt principles at work.

So no, border-radius isn't just aesthetic. It's part of your design language.

The Basic Syntax

Let's start from scratch.

/* All four corners equal */
border-radius: 8px;

/* Top-left/bottom-right, then top-right/bottom-left */
border-radius: 8px 16px;

/* Top-left, top-right/bottom-left, bottom-right */
border-radius: 8px 16px 24px;

/* Top-left, top-right, bottom-right, bottom-left (clockwise) */
border-radius: 8px 16px 24px 32px;

That clockwise order trips people up constantly. If you've ever applied values and gotten the wrong corner, this is why. The order starts at top-left and goes clockwise — same as margin and padding shorthand.

You can also use the longhand properties if you want to be explicit:

border-top-left-radius: 8px;
border-top-right-radius: 16px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 32px;

These are more verbose but much easier to read in a codebase where someone else needs to understand your intent.

Pixels vs Percentages: The Ongoing Debate

Both work, but they do different things.

Pixels give you an absolute corner size. border-radius: 8px means each corner curves with an 8-pixel radius, regardless of how big the element is. This is usually what you want for UI components like buttons and cards — you want the corners to stay the same visual size even if the button grows.

Percentages are relative to the element's dimensions. This is where it gets interesting — and where most people learn the circle trick.

/* Makes a perfect circle */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

Setting border-radius: 50% on an equal-width-and-height element creates a perfect circle. This works because 50% of both dimensions meets at the exact center of each edge. The browser calculates the radius as half the width on horizontal edges and half the height on vertical edges.

What happens if you use 50% on a rectangle? You get an ellipse. Try it:

.pill {
  width: 200px;
  height: 50px;
  border-radius: 50%;
}

That'll give you an egg shape, which is sometimes cool but often not what you meant. If you want a pill shape (fully rounded ends regardless of size), use a large pixel value instead:

.pill {
  border-radius: 9999px;
}

The 9999px trick works because the browser caps the radius at the largest it can be without the corners overlapping — so a button of any size will always look like a proper pill. Tailwind's rounded-full class uses exactly this approach.

Making Circles and Ellipses

The circle technique is one of those things that feels magical the first time you understand it.

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

/* Ellipse */
.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

If you need a circle avatar but the image might not be square, use aspect-ratio to ensure it stays square:

.avatar {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

That object-fit: cover is important — without it, a non-square image will stretch inside your circle rather than crop to fill it.

The Elliptical Radius Trick (Using the Slash)

Here's a feature of border-radius that most developers discover by accident: the slash syntax.

border-radius: 40px / 20px;

The values before the slash define the horizontal radius of each corner, and the values after define the vertical radius. So 40px / 20px means each corner has a 40px horizontal curve and a 20px vertical curve — creating elliptical corners instead of circular ones.

This gets really interesting with the full shorthand:

border-radius: 40px 0 40px 0 / 0 40px 0 40px;

That creates a shape that curves diagonally — like a leaf or a diamond-ish shape. It's one of those CSS tricks that feels like it shouldn't work but does.

The slash syntax is also the key to understanding how to make more organic, natural-feeling shapes.

Blob Shapes: Using All 8 Values

When designers talk about "organic shapes" or "blobs" in modern web design, they're usually using the full 8-value border-radius with the slash syntax.

Each corner has two radii — horizontal and vertical. With 4 corners and 2 values each, that's 8 numbers total. Here's an example:

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

That looks chaotic on paper but creates a pleasantly irregular organic shape. The key insight: using percentages with the slash syntax, and making values that add up to roughly 100% per axis, creates shapes that look natural rather than geometric.

These blob shapes are popular in hero sections as background decorations, image containers, and illustration frames. They soften a layout that might otherwise feel overly grid-locked.

Generating these by hand is genuinely hard — the values don't have an obvious visual relationship to the shape you end up with. This is exactly where a visual generator shines. You can drag sliders and see the shape update in real time, which is a thousand times faster than guessing values in DevTools.

Practical Use Cases

Buttons

Most button border-radius values fall between 4px and 8px for a standard button, with border-radius: 9999px for pill-style buttons. The sweet spot depends on your design system — just pick one value and stick to it consistently across all buttons.

/* Standard button */
.btn {
  border-radius: 6px;
}

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

Cards

Cards usually want subtle rounding — 8px to 16px. Too much and they start to look inflated. The key thing people forget: if you have a card with an image at the top, the image needs its own rounded corners on the top corners, or you need overflow: hidden on the card.

.card {
  border-radius: 12px;
  overflow: hidden; /* prevents children from bleeding outside */
}

Avatar / Profile Images

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

Progress Bars

A fully rounded progress bar is a classic UI pattern:

.progress-track {
  border-radius: 9999px;
  overflow: hidden;
}

.progress-fill {
  border-radius: 9999px;
}

Note that both the track and the fill get their own border-radius — the track clips the fill via overflow: hidden, but you usually want the fill's right edge to look rounded too.

Asymmetric Designs

Sometimes you want a shape that's only rounded on certain corners — like a chat bubble or a notification badge:

/* Chat bubble: rounded everywhere except bottom-left */
.chat-bubble {
  border-radius: 16px 16px 16px 0;
}

/* Opposite side */
.chat-bubble-received {
  border-radius: 16px 16px 0 16px;
}

Animating Border Radius

border-radius is fully animatable. This is underused, honestly.

.button {
  border-radius: 6px;
  transition: border-radius 0.3s ease;
}

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

A button that rounds on hover feels surprisingly satisfying — the shape change reinforces the state change in a subtle way. You can also animate blob shapes:

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

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

That continuously morphing blob effect is all over modern marketing sites right now. It's pure CSS — no JavaScript, no SVG — and it's just border-radius values changing over time.

Common Mistakes

Forgetting overflow: hidden on parent containers. The most common one. You apply border-radius to a card, but the image inside it still has sharp corners because it extends to the card's edge. Add overflow: hidden to the card and you're done.

Using the wrong units. Using percentages when you mean pixels causes border-radius to behave differently at different element sizes. If you want a consistent 8px curve, use 8px, not a percentage.

Not inheriting to pseudo-elements. If you're using ::before or ::after for decorative purposes inside a rounded container, they don't inherit border-radius. You either need overflow: hidden on the parent or explicit border-radius on the pseudo-element.

Inconsistent values across a design system. Using 6px on buttons, 10px on cards, 8px on inputs, and 5px on tooltips creates visual chaos even if each individual value seems fine. Pick 2-3 values and use them consistently.

Going too large on small elements. border-radius: 8px looks great on a 200px card. On a 16px icon button, that same value makes the corners overlap awkwardly. Scale your radius to your element size.

Browser Compatibility

border-radius has had universal browser support since IE9. You don't need vendor prefixes anymore — those old -webkit-border-radius and -moz-border-radius rules you see in legacy codebases are completely unnecessary. Any browser built in the last decade supports the standard syntax.

The one edge case worth noting: older versions of iOS Safari had some quirks with border-radius and overflow interaction on fixed-position elements. If you're targeting very old iOS, test your rounded modals and overlays carefully. But for anything modern, you're fine.

Using the Generator

The CSS Border Radius Generator lets you manipulate all 8 radius values visually and see the output shape in real time. It generates the complete CSS shorthand so you can paste it directly into your stylesheet.

It's genuinely faster for organic shapes than trying to reason about the numbers by hand. Use the sliders to get in the right ballpark, then fine-tune the values if you need precise control. The generated code also shows you the border-radius shorthand, so you learn the syntax as you go rather than just copying mystery values.

If you're building a design system, the generator is a good way to explore the range of shapes available before locking in your component styles. Try setting all 8 values to different percentages — you'll get a feel for how the individual values correspond to visual corners, which makes the syntax click in a way that reading a spec document never quite does.

Border-radius is one of those CSS properties that's easy to learn but surprisingly deep. A single property with 8 independent values that interact with the slash syntax and percentage-based sizing — there's genuinely a lot to explore. Start simple, and add complexity when you need it.