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/mdKZGzZ
8 Replies
Mannix
Mannix2y ago
you want to add overflow:hidden; to .content
Å Marlon G
Å Marlon G2y ago
Well, that was easy. So the square edges overflew the border radius?
Wolle
Wolle2y ago
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.
Å Marlon G
Å Marlon G2y ago
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.
Mannix
Mannix2y ago
border-radius is a shorthand you could use border-top-right-radius and border-top-left-radius
Å Marlon G
Å Marlon G2y ago
I 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?
Mannix
Mannix2y ago
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
Å Marlon G
Å Marlon G2y ago
Right, so just something to remember to look out for then. Thank you, both! 😄
Want results from more Discord servers?
Add your server