Is there a way to prevent these border-radius shine-through's?

So, like in the screenshot: you've got a dark background, inside it a light element with a border-radius and overflow:hidden

And inside this element another one with a different background color (or an image). And the mask doesn't really fit the radius but you get these 1px background colored border lines.

I just saw a "solution" to paint this over / blur away on stackoverflow, which really just works in a few cases. Isn't there another way?

Only well-I-dont-know solution I found so far:

  border-radius: 2rem;
  background: linear-gradient(to top, blue 2rem, #fff 2rem);


Basically overpaint the radius part at the bottom. And you need to go the inverse (to top instead to bottom direction)
Bildschirmfoto_2023-12-18_um_11.51.01.png
Was this page helpful?