Border Radius Generator_

Three things border-radius will not do for you

An inward corner is not this property

border-radius curves outward. There is no value — negative, percentage or otherwise — that curves inward, because the property describes the corner of a box rather than a shape cut out of one. A concave corner is a hole, and holes come from mask, clip-path or an overlaid element positioned to bite into the corner. The radial-gradient mask below is the usual answer and works on any background, which is why it beats the older trick of stacking a same-coloured circle on top.

A border gives the inside its own radius

The radius you set applies to the border box. The padding box gets its own, computed as the outer radius minus the border width and floored at zero — so a 10px border inside a 6px radius produces a perfectly square inner corner while the outside stays rounded. It looks like a rendering fault and it is the definition, and the fix is arithmetic: to keep the two curves looking parallel, the inner radius has to be the outer one minus the border, which means choosing the outer radius with the border already in mind.

On a table it does nothing at all

By default a table collapses its borders, which means adjacent cells share one border and there is no individual box left to round. Setting a radius on the table produces no visible change whatever value you use. It needs border-collapse: separate with border-spacing: 0, and then the radius has to go on the four corner cells rather than on the table — because the table's own corners are covered by them.

Each corner is an ellipse, not an arc

There are eight numbers here, not four. Everything before the slash is a horizontal radius and everything after it is vertical, so border-radius: 50% / 20% gives corners that are wide and shallow rather than circular. This is the entire mechanism behind every "blob" generator: eight percentages, four before the slash and four after, and the shape stops looking like a rectangle at all. Almost nobody writes the slash form, which is why the property seems to have fewer shapes in it than it does.

50% and 9999px are different shapes

On a square they agree and on anything else they do not. A 50% radius is half the width horizontally and half the height vertically, so on a wide box it produces an ellipse — a lens, not a pill. A large pixel value produces true semicircular ends, because the scaling rule caps it at half the shorter side. If you want a stadium shape, the right value is a big number in pixels, and 9999px is the conventional way to write "as round as this box allows".

The background is clipped; the children are not

A background colour or image follows the rounded shape automatically. A child element does not — an image, a video or a nested block will paint its own square corners straight over yours. The fixes are overflow: hidden on the parent, which also clips anything else that escapes, or the same radius on the child, which is more precise and does not create a new scroll container. This is by far the most common reason a rounded card has one stubbornly square corner.

Recipes for the shapes this property has no value for

/* Concave corners with a radial-gradient mask */
.inverted {
  --r: 24px;
  mask:
    radial-gradient(var(--r) at 0 0, #0000 98%, #000) 0 0,
    radial-gradient(var(--r) at 100% 0, #0000 98%, #000) 100% 0,
    radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100%,
    radial-gradient(var(--r) at 0 100%, #0000 98%, #000) 0 100%;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

/* One concave bite out of the left edge */
.notch {
  --r: 20px;
  mask: radial-gradient(var(--r) at 0 50%, #0000 98%, #000);
}

/* Radius needs separate borders, then the corner cells carry it */
table { border-collapse: separate; border-spacing: 0; }
tr:first-child th:first-child { border-top-left-radius: 8px; }
tr:first-child th:last-child  { border-top-right-radius: 8px; }
tr:last-child  td:first-child { border-bottom-left-radius: 8px; }
tr:last-child  td:last-child  { border-bottom-right-radius: 8px; }

/* The closest CSS gets, until superellipse() ships broadly */
.squircle {
  clip-path: path('M 0,50 C 0,0 0,0 50,0 S 100,0 100,50 100,100 50,100 0,100 0,50');
}