Border radius not appearing
Hi!
I've put a border radius on the
.content element, but with the image added the top of the image is not applying the border radius.
Adding border-radius to the image itself adds a radius to the bottom of the image, which I don't want.
The .content element holds all the content (dah!), so it makes sense to me that border radius would work.
https://codepen.io/amarlong/pen/mdKZGzZ8 Replies
you want to add
overflow:hidden; to .contentWell, that was easy. So the square edges overflew the border radius?
If a child does not have
border-radius it will overflow its parent if the parent has. So alternatively you could give your children border-radius.Isn't that what I did when I added
border-radius to the .image element?
When I did that the border-radius was added to the bottom of the picture (.image), which is not what I want. The edge between -image and .info should have no radius.border-radius is a shorthand you could use border-top-right-radius and border-top-left-radiusI see! What would be best practice in this example? If someone else where to understand the code fastest/easiest ...
Overflow or the specific border-radiuses?
in this example it doesn't really matter. Sometimes you don't want to put overflow: hidden on stuff so you use the border-radiuses
Right, so just something to remember to look out for then. Thank you, both! 😄