1

I have an issue with a set of images on a site I'm building. I want the images to have rounded edges. They do. The problem is the inner border of their container div does not, even after a border-radius style being applied. The pictures zoom in when you hover over them, so the rounded corners are covered by the non-rounded corners of the container when they expand. The idea is to avoid the appearance of the image expanding by covering the extra width and height with the parent div with overflow:hidden set. But I need the border to be applied to the inner edge of the parent. The way it's set up, when you hover, the corners look like they sharpen due to the inner edge of the container... which is not what I want.

This does not work: 

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

Here is a picture of the issue with the background red so it's easy to see the problem:

enter image description here

Here is the section in question. 

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

Here are the relevant styles: 

    * {
      -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;
}
J Seabolt
  • 2,576
  • 5
  • 25
  • 57
  • 1
    Possible duplicate of [CSS - border radius and solid border curved inside](https://stackoverflow.com/questions/20382037/css-border-radius-and-solid-border-curved-inside) – Huangism May 25 '17 at 18:22
  • 1
    You can achieve this also by giving the outer and inner div a background colour – Huangism May 25 '17 at 18:22
  • Can you unmark this as a duplicate? this answer does not work and now no one is looking at this post – J Seabolt May 25 '17 at 19:54
  • It is only voted to close, the question itself is not closed. The answer in the other question should work because I tried it in a fiddle. You should update the question with your most recent fix and create a simplified version on a fiddle, here is an example https://jsfiddle.net/rbo86rw8/ you can see the curve on the inside of the border – Huangism May 25 '17 at 20:27
  • Also see https://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border – Huangism May 25 '17 at 20:33

0 Answers0