Help me with some css issues

Question

I was working on a profile card UI and I don't know what's the problem but the box shadow is not appearing around the footer section...

https://code.sololearn.com/W2f23TRTwqOm/?ref=app

Answer 1

Rahul Toni Isotalo Chandan Kumar Mandal and as usual the "overflow:hidden" property worked for me...

no need to add separate border radius to header and footer now...

Answer 2

If you change .card border radius to 100px you can see how its childrens are covering it.
I agree with Rahul

Answer 3

I have to admin you have really good designs.
I think the blur radius is too small.
Change the last value. Change it first to 10px so you can see that it's working
box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);

Answer 4

@ Ayush Gupta, To apply border-radius, you should use it on child elements rather than the parent element.

.card-head, .card-footer {
border-radius: 0 0 5px 5px;
}

Edit: The parent element is under its child element. So, even if border-radius is working, it will have no effect on the view, as it is hidden below!

Answer 5

there's still a problem😅 the border radius is not working

Answer 6

Try using browser tags.It is working with browser tags.

-webkit-border-radius

Answer 7

Rahul that way will work good. Actually the border radius is working but we cannot see it due to the presence of header and footer

I was wondering why is this happening and is there any other way like overflow hidden???

Answer 8

Toni Isotalo your opinion for fixing that border radius???

Answer 9

You have to implement it to the each child elements as rahul said above.
and you should use browser tags it may be handy if users browser is in not updated ..