overflow hidden with border radius shows a weird grey border over images

Question

I have a round div which wraps an image and two other divs. The problem is that it is shown a grey border around this div. The problem is on all browsers chrome and firefox. I have tried putting browser css-vendor-prefixes, masks but no result.

I can not use :

img {
  width: 100%;
  height: 100%;
  border-radius: 120px;
}

because the image is not in the correct aspect-ratio. It is in 1:1. It should be on 16:9 because it is a YouTube video frame.

<div class="video_wrap">
    <div class="views">1651</div>
        <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
    <div class="title">o'najr</div>
</div>

.video_wrap {
    width: 240px;
    height: 240px;
    border-radius: 120px;
    overflow: hidden;
}

.views, .title {
    position: relative;
    background: #fff;
    height: 50px;
    color: #f8008c;
    text-align: center;
    line-height: 50px;
}

.views {
    top: 0px;
    z-index: 2;
}

.title {
    top: -100px;
}

.video_wrap img {
    height: 100%;
    position: relative;
    top: -50px;
}

fiddle http://jsfiddle.net/h3198LfL/

Answer 1

You could remove the border-radius:120px from .video_wrap and add following to your img

img{
   width:100%;
   border-radius: 120px;
}

SNIPPET

.video_wrap {
  width: 240px;
  height: 240px;
  overflow: hidden;
}
img {
  width: 100%;
  border-radius: 120px;
}
.views,
.title {
  position: relative;
  background: #fff;
  height: 50px;
  color: #f8008c;
  text-align: center;
  line-height: 50px;
}
.views {
  top: 0px;
  z-index: 2;
}
.title {
  top: -100px;
}
.video_wrap img {
  height: 100%;
  position: relative;
  top: -50px;
}

<div class="video_wrap">
  <div class="views">1651</div>
  <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
  <div class="title">o'najr</div>
</div>

Answer 2

add the webkit code and others in video-wrap, as in:

.video_wrap {
width: 240px;
height: 240px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-ms-border-radius:120px;
-o-border-radius:120px;
border-radius: 120px;
overflow: hidden;
}

to avoid the border, you can set new line of it, as in:

.video_wrap img {
border:0px;
border:none;
}

DEMo