CSS Border-Radius Generator

For nested rounded corners, the inner radius must be smaller

Have you ever placed a rounded button or image inside a rounded card and felt something was off? It's usually because you've used the same border-radius for both the inner and outer elements.

For two curves to flow parallel to each other, the difference between the outer and inner radii must equal the space between them. If this relationship is broken, the gap between the two curves will widen or narrow at the corners, creating a visual disconnect.

• If the padding is greater than the outer radius, the inner radius should be 0 (a sharp corner). There's no such thing as a negative radius.
• If the padding is 0, the inner radius should be the same as the outer one. This is the case when an image completely fills a card.
• Following this rule might seem like a minor detail, but it makes your design look significantly more polished. Most well-crafted design systems adhere to it.

/* Inner radius = Outer radius - padding */
.card {
  border-radius: 16px;
  padding: 8px;
}
.card > img {
  border-radius: 8px;   /* 16 - 8 = 8 */
}

/* Lock in the relationship with CSS variables to avoid errors. */
.card {
  --r: 16px;
  --pad: 8px;
  border-radius: var(--r);
  padding: var(--pad);
}
.card > img {
  border-radius: calc(var(--r) - var(--pad));
}

Create pill shapes with a large pixel value, like 999px

When creating a pill shape—a rectangle with fully rounded ends—you shouldn't use `50%`. The percentage unit is relative to the element's width and height. On a long button, a 50% radius will result in stretched, elliptical ends, not perfect semicircles.

The solution is almost laughably simple: use a pixel value that is guaranteed to be larger than half the element's height. The browser will automatically cap the radius to create a perfect semicircle. That's why using a large value like `999px` ensures a perfect pill shape, regardless of the button's height.

The slash (/) syntax: What the eight values mean

The `border-radius` property can accept up to eight values. The four values before the slash define the horizontal radius of each corner, and the four values after the slash define the vertical radius. When the horizontal and vertical radii for a corner differ, the corner becomes elliptical rather than circular.

The order is clockwise: top-left → top-right → bottom-right → bottom-left. This is easy to confuse with other four-value CSS properties like `margin`, which start at the top (top → right → bottom → left), not the top-left.

/* If all four values are the same, you can shorten it to one */
border-radius: 16px;

/* Different values per corner (clockwise: top-left, top-right, bottom-right, bottom-left) */
border-radius: 18px 18px 18px 2px;   /* Sharper bottom-left corner = speech bubble tail */

/* The slash syntax: first 4 are horizontal radii, last 4 are vertical */
border-radius: 60% 40% 30% 70% / 30% 60% 70% 40%;

What are blobs used for?

Organic, fluid shapes (or "blobs") became a major trend on landing pages around 2020 and are still common today. Their main appeal is that they can be created with a single line of CSS, no SVG or images required.

However, you should avoid using blobs as content containers. The extreme corner rounding can cause text to be clipped or create awkward internal spacing. In practice, blobs are almost always used for background decoration.

• Color splotches in a hero section background. Fill one with a gradient, apply a heavy blur filter, and place it behind other content for a modern SaaS landing page feel.
• A mask for a profile picture. Applying a blob-like radius to a square photo can create a softer, more approachable look.
• A background accent behind an icon to make it stand out from a plain background.
• A decorative element to separate sections, often by placing a large blob partially off-screen.

/* Hero background decoration — place behind and blur */
.blob {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 60% 40% 30% 70% / 30% 60% 70% 40%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  filter: blur(60px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}

When border-radius gets ignored or clipped

• A child element overflows a parent with default overflow. Even if you set a radius on the parent, a child image will stick out of the corners. You must also add `overflow: hidden` to the parent.
• On `table` elements. `border-radius` has no effect on tables with `border-collapse: collapse`. Change it to `separate` or apply the radius to a wrapping `div` instead.
• The radius is larger than the element's size. The browser automatically scales it down proportionally. This is not an error but defined behavior, and it's the principle that makes the `999px` pill-shape trick work.
• Default `input` and `button` styles. Safari on iOS forcibly applies its own default radius. You need to add `-webkit-appearance: none` for your own styles to apply.
• When used with a shadow. `box-shadow` follows `border-radius` automatically, so no extra work is needed. However, if you create a shadow using a pseudo-element (::after), don't forget to add `border-radius: inherit`.