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

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 a

Answer 1

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/

Answer 2

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 3

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.