Skip to content

Instantly share code, notes, and snippets.

@adamcbrewer

adamcbrewer/webkit-css-mask.css

Created June 25, 2013 16:04
Show Gist options
  • Star 34 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save adamcbrewer/5859738 to your computer and use it in GitHub Desktop.
Save adamcbrewer/5859738 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: overflow/border-radius mask bug-thingy
Raw
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);
}
@joosia
Copy link

joosia commented Apr 7, 2023

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

@marinagallardo
Copy link

Works like charm. Thanks for sharing <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment