Rounding the sides of a big image contained in a s

Question

I am trying to rounding the sides of a background image with border-radius property.

Here is my scenario:

I placed a big image in a small division as background and put the overflow hidden. Now I need to round the small division. I successfully rounded the corner of small division. But the image's corner is not rounding.

HTML:

<div class="video_thumb">
    <div style="background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg); " class="video-thumbnail"></div>
</div>​

CSS

.video_thumb {
    height: 250px;
    width: 300px;
    overflow:hidden;
    margin:20px;
    border: 1px solid red;
    z-index:100;
    position:relative;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.video-thumbnail {
    width: 520px;
    height: 100%;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    z-index:10;
    overflow:hidden;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Here is a demo using jsfiddle

You can see the top left and bottom left border are rounded. But top right and bottom right corner are not rounded. How can we make all the corners of image rounded?

I tried adding z-index, overflow: hidden to both divs, but no luck.

EDIT:

This problem is only with Google Chrome. Working fine on Firefox browser.

Answer 1

This appears to be a Chrome bug and you should consider raising it as such @ http://code.google.com/p/chromium/issues/list

For now, you can "work around it" by changing position: relative to position: static

A Hacky Fix

As answered here, you can add a -webkit-mask-image to the parent element to hide the overflowing content:

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

Answer 2

Just Updated your Fiddle. Hope this will solve your problem.

DEMO

http://jsfiddle.net/saorabhkr/e94q3/13/

Removed fixed width from this class (.video-thumbnail) and put background-size in your markup where you are adding image/video.

Answer 3

You can try using this piece of code http://jsfiddle.net/shubhanshumishra/e94q3/10/ You don't need to set border radius for both the wrapping div and the div with image.

Here is the code:

.video-thumbnail{

background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg);;

width: 300px;

height: 250px;

border: 8px solid #666;

 border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

​You can use the background-position property to clip the area you want. Also you can use the background-size property to stretch your background image as you want.

Here is the link to the updated fiddle: http://jsfiddle.net/shubhanshumishra/e94q3/14/