How to make CSS3 rounded corners hide overflow in Chrome/Opera using webkit-mask-image?

Question

Where can I generate this type of css to make just a bottom right border???

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    }

This almost works but I need more rounded corner

Here is the code I have so far:

.container {
    width: 960px;
    height: 700px;
    background:#FFF;
    position:absolute;
    top: 0px;
    left: 50%;
    overflow:hidden;
    margin: 70px 0px 0px -480px;
    border: 0px solid #900;
    border-right: 15px solid #900;
    border-bottom: 15px solid #900;
    -webkit-border-radius-bottom-right: 100px;
    -moz-border-radius-bottomright: 100px;
    border-bottom-right-radius: 100px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    z-index: 55;
}

.slideshow {
    position:relative;
    width: 960px;
    height: 700px;
    top: -1600px;
    left: 0px;
    z-index: 51;
}

Works great in everything except Chrome

score 0 · Answer 1 · answered Nov 14 '12 at 09:17

Chrome have a Webkit bug...

CSS Border radius not trimming image on Webkit

Bug Reports...

BUG WEBKIT

That means that if you have a div in absolute position with a border radius and a overflow hidden, the image or the content inside not respect the overflow. A solution can be to insert the image in the background-image of your main div and it works.

How to make CSS3 rounded corners hide overflow in Chrome/Opera using webkit-mask-image?

1 Answers1