Why border radius is only working in 1 corner?-CodePudding

I am working on a project (I pasted the part affected) and I am trying to round the 4 corners of the image. So far the container is working but the image only has 1 corner rounded (Bottom right). I was looking for similar questions because there are few, but I was not able to make my code work with those answers. Any ideas about what the error might be?

Thank you in advance to anyone who takes the time to read and reply!

.cardcontainer {
    width: 300px;
    background-color: grey;
    border-radius: 15px;
    padding-bottom: 10px;
}

.mainimage {
    width: 260px;
    padding-top: 20px;
    padding-left: 20px;
    border-radius: 8px;
}

<div >
<img  src="./image.jpg" alt="Image">
</div>

CodePudding user response：

It' because you added padding-top: 20px; and padding-left: 20px; on that image class. Remove these and you will see the border radius on all 4 corners:

.cardcontainer {
  width: 300px;
  background-color: grey;
  border-radius: 15px;
  padding-bottom: 10px;
}

.mainimage {
  width: 260px;
  border-radius: 20px;
}

<div >
  <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT57B75xIfuwkTT0FO1EHI0TK65RcvXIwQ5nNoMePOy9FMxaV5FJ72u6bHLf9N8v9OcARk&usqp=CAU" alt="Image">
</div>

CodePudding user response：

The padding remove the border-radius from the image. One solution would to work with margins.

.cardcontainer {
  width: 300px;
  background-color: grey;
  border-radius: 15px;
  padding-bottom: 10px;
  text-align:center;
  padding:10px;
}

.mainimage {
    width: 260px;
    margin:20px 0px;
    border-radius: 8px;
}

<div >
  <img  src="https://via.placeholder.com/400/green" alt="Image">
</div>