Search code examples
htmlcssimagerounded-cornersborder-radius

border-radius is only rounding one corner

the border-radius css command doesn't seem to be working on all corners. html:

<img style="object-position: -200px -100px;" 
    id="wlimage"
    <!--this is the image giving me problems--> src="https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock- 
424782349.jpg">

css

#wlimage {
border-radius: 30px;
width: 50%;
height: 50%;
}
Solution

  • The problem is that your object-position style shifts the image within the img frame. The frame is rounded, but you're seeing the (square) edge of the picture itself.

    I've added a red border so you can see where the boundary of the <img> element is vs. where the edge of the picture is placed within it.

    #wlimage {
  border-radius: 30px;
  border: 4px solid red; 
}
    <img style="object-position: -200px -100px;" 
  id="wlimage"
  src="https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock-424782349.jpg">