How to make CSS3 rounded corners hide overflow in Chrome/Opera

by

I found another solution for this problem. This looks like another bug in WebKit (or probably Chrome), but it works. All you need to do – is to add a WebKit CSS Mask to the #wrapper element. You can use a single pixel png image and even include it to the CSS to save a HTTP request.

#wrapper {
    width: 300px; height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}
<div id="wrapper">
    <div id="box"></div>
</div>

More Related Contents:

  1. How to create uneven rounded sides on a div?
  2. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  3. Rounded table corners CSS only
  4. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  5. Menu does not align correctly in Safari
  6. My inline-block elements are not lining up properly
  7. How can I select the last element with a specific class, not last child inside of parent?
  8. Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
  9. IE8 issue with Twitter Bootstrap 3
  10. Making a div vertically scrollable using CSS
  11. Matching the first/nth element of a certain type in the entire document
  12. Elongated hexagon shaped button using only one element
  13. Align image in center and middle within div
  14. CSS :first-letter not working
  15. CSS absolute position won’t work with margin-left:auto margin-right: auto
  16. Is it possible to display an .html document , or .html fragment at CSS content?
  17. What are the priorities among CSS selectors
  18. How to add button inside input [closed]
  19. CSS: How can I set image size relative to parent height?
  20. what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?
  21. How to center an iframe horizontally?
  22. How to Make A Chevron Arrow Using CSS?
  23. Change the column order in a css grid
  24. How to center buttons in Twitter Bootstrap 3?
  25. :before && :after pseudo elements not showing Firefox
  26. @font-face not working with specific version of Internet Explorer 11
  27. Img’s max-height not respecting parent’s dimensions
  28. backdrop-filter not working for nested elements in Chrome
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment