How to make CSS3 rounded corners hide overflow in Chrome Opera

Question

I need round corners on a parent div to mask content from its childen  overflow  hidden works in simple situations  but breaks in webkit based browsers and Opera when the parent is positioned relatively or absolutely   This works in Firefox and IE9   CSS   wrapper     width  300px    height  300px    border-radius  100px    overflow  hidden    position  absolute      box     width  300px    height  300px    background-color   cde      HTML   lt div id  wrapper  gt     lt div id  box  gt  lt  div gt   lt  div gt    Example on JSFiddle  Thanks for the help   UPDATE  The bug causing this issue has been since fixed in Chrome  I have not re-tested Opera or Safari however

User · Answer

As for me none of the solutions worked well, only using:

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

on the wrapper element did the job.

Here the example: http://jsfiddle.net/gpawlik/qWdf6/74/

User · Answer

If you are looking to create a mask for an image and position the image inside the container don t set the  position  absolute  attribute  All you have to do is change the margin-left and margin-right  Chrome Opera will adhere to the overflow  hidden and border-radius rules      Breaks in Chrome Opera       container           overflow  hidden          border-radius  50           img               position  absolute              left  20px              right  20px                      Works in Chrome Opera       container           overflow  hidden          border-radius  50           img               margin-left  20px              margin-right  20px

User · Answer

Nevermind everyone  I managed to solve the problem by adding an additional div between the wrapper and box   CSS   wrapper       position  absolute      middle       border-radius  100px      overflow  hidden       box       width  300px  height  300px      background-color   cde      HTML   lt div id  wrapper  gt       lt div id  middle  gt           lt div id  box  gt  lt  div gt       lt  div gt   lt  div gt    Thanks everyone who helped     http   jsfiddle net 5fwjp

User · Answer

Seems this one works    wrap       -webkit-transform  translateZ 0       -webkit-mask-image  -webkit-radial-gradient circle  white 100   black 100        http   jsfiddle net qWdf6 82

User · Answer

Not an answer  but this is a filed bug under the Chromium source  http   code google com p chromium issues detail id 62363  Unfortunately  doesn t look like there s anyone working on it

User · Answer

Supported in latest chrome  opera and safari  you can do this   -webkit-clip-path  inset 0 0 0 0 round 100px   clip-path  inset 0 0 0 0 round 100px     You should definitely check out the tool http   bennettfeely com clippy

User · Answer

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        this fixes the overflow hidden in Chrome    -webkit-mask-image  url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA oJAAAAAElFTkSuQmCC       box   width  300px  height  300px  background-color   cde       JSFiddle Example

User · Answer

Here look at how I done it  Jsfiddle   With the Code I put in  I managed to get it working on Webkit  Chrome Safari  and Firefox  I don t know if it works with the latest version of Opera  Yes it does work under the latest version of Opera    wrapper     width  300px  height  300px    border-radius  100px    overflow  hidden    position  absolute     this breaks the overflow hidden in Chrome Opera        box     width  300px  height  300px    background-color   cde    border-radius  100px    -webkit-border-radius  100px    -moz-border-radius  100px    -o-border-radius  100px

User · Answer

Add a z-index to your border-radius d item  and it will mask the things inside of it

User · Answer

based on graycrow s excellent answer      Here s a more real world example that has two cicular divs with some filler content  I replaced the hard-coded png background with just a hex value  i e   - -webkit-mask-image  url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA oJAAAAAElFTkSuQmCC     is replaced with   -webkit-mask-image  fff    See this JSFiddle    http   jsfiddle net hqLkA

User · Answer

change the opacity of the parent element with the border and this will re organize the stacked elements  This worked miraculously for me after hours of research and failed attempts  It was as simple as adding an opacity of 0 99 to re organize this paint process of browsers  Check out http   philipwalton com articles what-no-one-told-you-about-z-index

User · Answer

opacity  0 99  on wrapper solve webkit bug

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

Examples related to html

Examples related to rounded-corners

Examples related to css