边界半径不适用于div的内边缘

Question

我正在构建的网站上有一组图片存在问题。我希望图像有圆角。他们是这样。问题是，即使应用了border-radius样式，它们的容器div的内边框也没有。当您将鼠标悬停在图片上时，图片会放大，因此圆角在展开时会被容器的非圆角覆盖。我们的想法是通过使用overflow：hidden set覆盖父div的额外宽度和高度来避免图像扩展的外观。但我需要将边框应用于父级的内边缘。它的设置方式，当你悬停时，角落看起来像是由于容器的内边缘而锐化......这不是我想要的。

这不起作用：

-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;

以下是背景红色问题的图片，因此很容易看到问题：

以下是相关部分。

    <div class="col-md-10 col-md-push-1">
        <div class="col-md-6 photo_pad border border-radius">
            <div class="col-md-12 photo_pad item border-radius">
                <%= image_tag "yoga1.jpg", class:'index_image_big border-radius' %>
            </div>
        </div>
        <div class="col-md-6 photo_pad">
            <div class="col-md-6 photo_pad item border">
                <%= image_tag "yoga4.jpg", class:'index_image border-radius' %>
            </div>
            <div class="col-md-6 photo_pad item border">
                <%= image_tag "yoga5.jpg", class:'index_image border-radius' %> 
            </div>
            <div class="col-md-6 photo_pad item border">
                <%= image_tag "yoga2.jpg", class:'index_image border-radius' %> 
            </div>
            <div class="col-md-6 photo_pad item border">
                <%= image_tag "yoga3.jpg", class:'index_image border-radius' %> 
            </div>
        </div>
    </div>
</div>

以下是相关风格：

    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .item {
      overflow: hidden;
    }
    .item img {
      max-width: 100%;

      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .item:hover img { 
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
.border {
    border: 15px solid #1e1e1e;
}
.border-radius {
    border-radius: 10px !important;
}
.border_thick {
    border: 30px solid #1e1e1e;
}
.center_section {
    background-color:red; 
    padding-top: 80px; 
    padding-bottom: 80px; 
    z-index: 9; 
}
.center_padding {
    padding-bottom: 50px;
}