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

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);
}