CODEWITHSUNDEEP
htmlcss
Pedro
Pedro

Reputation: 35

Why border radius is only working in 1 corner?

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>

Upvotes: 2

Views: 1171

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17566

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>

Upvotes: 1

NeNaD
NeNaD

Reputation: 20334

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>

Upvotes: 1

Related Questions