CSS Border-Radius: Gotchas & Advanced Tips

If you already know how border-radius syntax works, this part is for you. These are the issues that show up once you move past single values and start combining border-radius with other properties: things that silently override it, corners that look wrong even though the CSS is "correct," and animation costs nobody warns you about. For syntax and live examples, the Border Radius Generator covers the basics.

Why border-image overrides border-radius

Setting border-image on an element replaces the entire rendered border, including the rounded corner treatment. The border-radius value is still technically applied to the box, but the border-image paints over it with sharp, image-based edges. This is why a card with rounded corners suddenly looks square the moment a decorative border-image is added.

/* border-radius is set, but border-image wins */
.card {
  border-radius: 12px;
  border-image: url(frame.png) 30 round;
  /* corners render sharp, not rounded */
}

Getting nested corners to line up

A common pattern: a card with border-radius and padding, containing an image that also has border-radius. Using the same radius value on both almost never looks right, because the inner element's curve starts from a different reference point than the outer one.

The rule that actually works: child-radius equals parent-radius minus padding. If the padding is larger than the parent's radius, the child can usually just be square.

.card {
  border-radius: 16px;
  padding: 8px;
}

.card img {
  /* 16px - 8px = 8px, not 16px */
  border-radius: 8px;
}

border-radius on tables

By default, tables use border-collapse: collapse, which merges adjacent cell borders into shared edges. This breaks border-radius on the table or individual cells, since there's no longer a distinct edge for the curve to render against.

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  /* wrapper clipping needed; the table element itself
     doesn't reliably clip rounded corners across browsers */
}

When border-radius can't make the shape

Border-radius only produces rectangles with rounded or elliptical corners. It cannot create concave curves, stars, hexagons, or arbitrary outlines. For those, clip-path takes over.

/* a shape border-radius simply cannot do */
.tag {
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}

The trade-off: border-radius is cheap to compute and scales cleanly with the element. Clip-path values are usually fixed points, so they need recalculating if the element resizes significantly.

Why animating border-radius costs more than you'd expect

Transform and opacity are composited on the GPU, so animating them skips layout and paint entirely. Border-radius is not in that category. Every frame of a border-radius animation has to be repainted, which gets expensive fast on large elements or when several are animating at once, like a grid of cards morphing on hover.

Frequently asked questions

Does border-radius change the clickable area of an element?

No. Rounding is purely visual. The element's full bounding box, including the visually cut-off corners, remains clickable.

Can I round an SVG shape with CSS border-radius?

Support is inconsistent across browsers. Use the native rx and ry attributes on an SVG rect for reliable results instead.

Why does my background image spill past the rounded corner?

Usually because background-clip is set away from its default border-box value, or a child element is painting its own background outside the rounded parent without overflow: hidden containing it.

Does rounding a flex or grid container automatically clip its children?

No, regardless of layout mode. You still need overflow: hidden directly on the element carrying the border-radius.