The edges of white image shows when absolute sibling div above it

The white corners appear because both the overlay and the image have border-radius, which causes sub-pixel anti-aliasing. The image bleeds through at the rounded edges. You can fix it without restructuring by making the overlay slightly larger so it fully covers the corners.

Change the overlay from:

<div class="absolute w-full h-full bg-black rounded-2xl"></div>

to:

<div class="absolute -inset-[1px] bg-black rounded-2xl"></div>

This expands the overlay by 1px in all directions and removes the visible edge.

The white edges usually appear because the rounded corners of the absolutely positioned overlay and the image are being anti-aliased separately. Even though both use rounded-2xl, the browser smooths each layer a bit differently, so tiny white corners can show through.

<div class="relative overflow-hidden w-40 h-40 rounded-2xl"> <div class="absolute inset-0 bg-black z-10"></div> <img src="your-image.jpg" class="w-full h-full object-cover" /> </div>

You can also add inset-0 instead of w-full h-full for cleaner absolute positioning.

I checked this in an html viewer and it removes the corner bleed issue reliably.