Why border radius is only working in 1 corner?

user_16067572 0
Viewed 89

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 class="cardcontainer">
<img class="mainimage" src="./image.jpg" alt="Image">
</div>

css html
2 Answers

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 class="cardcontainer">
  <img class="mainimage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT57B75xIfuwkTT0FO1EHI0TK65RcvXIwQ5nNoMePOy9FMxaV5FJ72u6bHLf9N8v9OcARk&usqp=CAU" alt="Image">
</div>

user_143898300

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 class="cardcontainer">
  <img class="mainimage" src="https://via.placeholder.com/400/green" alt="Image">
</div>

user_148071110
Related