Próbuję zaokrąglić boki obrazu tła za pomocąborder-radius własność.

Oto mój scenariusz:

Umieściłem duży obraz w małym podziale jako tło i ukryłem przelew. Teraz muszę zaokrąglić mały podział. Udało mi się zaokrąglić róg małej dywizji. Ale róg obrazu nie jest zaokrąglony.

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

Oto demo z jsfiddle

Możesz zobaczyć, że górna lewa i dolna lewa granica są zaokrąglone. Ale prawy górny i prawy dolny róg nie są zaokrąglone. Jak możemy zaokrąglić wszystkie rogi obrazu?

Próbowałem dodaćz-index, overflow: hidden do obu div, ale bez szczęścia.

EDYTOWAĆ:

Ten problem dotyczy tylko Google Chrome. Działa dobrze w przeglądarce Firefox.