overflow:hidden not hiding elements under a border-radius

Question

Possible Duplicate:
Rounding the sides of a big image contained in a small division not working in Chrome

What I'd like to do is have a 'vault' that opens when the user mouses over the inner wrap element. The problem I've run into is that (in Chrome at least) the 'doors' aren't being hidden under the border-radius area of the inner wrap element. Is there any CSS-only way to rectify this, or am I going to have to look at something a bit more complex?

HTML:

<div class="vault-wrap-1">

    <div class="vault-wrap-2">

        <div class="vault-door-1"></div>

        <div class="vault-door-2"></div>

    </div>

</div>

CSS:

div.vault-wrap-1 {
    height:600px;
    width:600px;
    border-radius:9999px;
    background:green;
    margin:auto;
    padding:30px;
}

div.vault-wrap-2 {
    height:600px;
    width:600px;
    border-radius:9999px;
    background:blue;
    overflow:hidden;
}

div.vault-door-1, div.vault-door-2 {
    height:600px;
    width:300px;
    background:red;
}

div.vault-door-1 {
    float:left;
}

div.vault-door-2 {
    float:right;
}

And also [How to make CSS3 rounded corners hide overflow in Chrome/Opera](http://stackoverflow.com/a/10296258/681807) — My Head Hurts, Oct 23 '12 at 07:31

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

This seems to be a problem only in Webkit browsers when trying to round corners on positioned elements.

The solution, as shown in this answer, is to add a -webkit-mask-image to the element with the border-radius:

div.vault-door-1, div.vault-door-2 {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

edited May 23 '17 at 11:48

Community

1
1

answered Oct 23 '12 at 07:30

My Head Hurts

37,315
16
75
117

Allow me to love you 90000 times. Probably would've been a good idea to be a bit more thorough when I was looking it up before I asked the question. Cheers c: – user1716372 Oct 23 '12 at 07:40
@user1716372 No problem - it took me a little while to find the cause the first time I saw the issue :) Don't forget to accept the answer – My Head Hurts Oct 23 '12 at 07:43

overflow:hidden not hiding elements under a border-radius

1 Answers1