Skip to content

Instantly share code, notes, and snippets.

@onurozkan
Forked from adamcbrewer/webkit-css-mask.css
Created November 27, 2013 13:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save onurozkan/7675538 to your computer and use it in GitHub Desktop.
Save onurozkan/7675538 to your computer and use it in GitHub Desktop.
/*
* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment