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/