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 .content
Well, 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-radius
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?
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! 😄