Design comparison
Solution retrospective
Please, someone help me! I put border-radius on the image but it didn't work Can anyone help me solve it and why it didn't work?
What specific areas of your project would you like help with?Please, someone help me! I put border-radius on the image but it didn't work Can anyone help me solve it and why it didn't work?
Community feedback
- @kodan96Posted 6 months ago
hi there! 👋
-
It's probably because you applied
padding
to theimg
element. when you applyborder-radius
it gets applied to the border (the outer line of the padding). -
if your
border-radius
is not large enough it won't show up, and even if it is it won't give you the result you want. -
it's better practice to apply padding to the parent element to prevent these behaviors.
Hope this helped 🙏
Good luck and happy coding! 💪
Marked as helpful1 -
- @AkoToSiJeromeEhPosted 6 months ago
Hey ! Great work out there i notice why the border-radius seems doesn't work even you add border radius in img element is because of the padding on it since the border-radius is 10px it seems that it did not work but when you give a higher value like ** > 20px** it is working , to fix this you should remove the padding in .imagem img and add the padding in imagem only. that's all happy coding !!
.imagem { padding: 10px; // add this or you can adjust }
.imagem img { width: 100%; padding: 15px; // remove this border-radius: 10px; }
Marked as helpful1 - @LuriianPosted 6 months ago
Please, someone help me! I put border-radius on the image but it didn't work Can anyone help me solve it and why it didn't work?
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord