CSS: overflow/border-radius mask bug-thingy

webkit-css-mask.css

/*
 * There's a bug in Chrome/Safari using overflow:hidden with border-radius. This mask fixes it. 
 * Solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258
 */
.masked {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Seems this is still a bug. Thanks for the fix, saved me hours!

This is still a bug, and this fixed it. Thank you.

Thank you.

There is cleaner mask for it:

mask-image: radial-gradient(circle, white 100%, black 100%);

Also, possibly lighter, using a path rather than a black/white mask:

.masked {
   -webkit-clip-path: circle(50% at 50% 50%);
}

Thank you so much, it saved my life!

I just found another way to fix it，set the mask element as positioned and z-index greater than -1：

.masked {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
   /* z-index is the key */
    z-index: 1;
}

2018 is this still an issue?

Thank you, this fixed my problem!

@RickFrom1987 This is still an issue in 2018...

Thank you so much @sergeylaptev and @adamcbrewer !
Both your solutions worked for me!
I came here because I had an element with border radius and elements with position sticky where were "overflowing" beyond their container.

Thank you very much, this solved my problem!
P.S. greetings from 2020

@Libidine you're welcome! It would be amazing if this is still an issue :)

Thank you so much! You also saved me~ I hava tried for 3.5 hours this evening! Thanks to your solution I fixed my problem

Great! 2022 and still relevant. 👍

Oh yes, thank you! Such a pain in the ass. And still relevant in 2023... 😄

Works like charm. Thanks for sharing <3