Border-radius not applying to image

Question

For the purpose of adding a button later, I have placed my images inside of their own individual div. After this, I tried to reapply the border radius that was working previously and it is not applying to the image. However when I use it on an item not in a div it works fine.

.image1 {
  padding:0 13px 0 0;
  float: left;
  width: 220px;
  border-radius: 40px;
}

Answer 1

You should add overflow: hidden; container div's css. Because you're applying border-radius on a div. border-radius not for <img> tag according in your code. Also you have padding on container div. So you should be add box-sizing: border-box; to fix it. Read more about box-sizing

FIDDLE HERE

.image1 {
  padding:0 13px 0 0;
  float: left;
  width: 220px;
  border-radius: 40px;
  overflow:hidden;
  box-sizing:border-box;
}