Round a box-shadow without round the parent
I don't know if it's possible but I know that if the parent container has rounded corners I can see the background behind it.
Thank you.
box-shadow: inset 0.5vw 0.5vw #991b1b, inset -0.5vw -0.5vw #991b1b, inset 1vw 1vw #f1f1f1, inset -1vw -1vw #f1f1f1;
7 Replies
So you don't need help?
Oh sorry, I need help, do you know how to round the box shadow but not the parent ?
You could put the shadow on a pseudo element. Or even create the shadow effect with with the pseudo element itself.
I know that if the parent container has rounded corners I can see the background behind it.If you add
overflow: clip; or overflow: hidden; to the parent element you won't be able to see the background behind the corners.not entirely certain from the question but are you looking for something like this: https://codepen.io/jsnkuhn/pen/yLdWOrj
Sorry for my poor explanations. My problem is that my box-shadow doesn't round properly, and you can see the background or the button (in case I apply the box-shadow to an after or before pseudo-element) because I am rounding it. I even tried using after and before (one for each color), but the blend keeps this strange shape. If anyone has any ideas, I'm open to them. Thanks.
I'm still only guessing at what shape you're trying to create but maybe give this box-shadow a try in place of what you are using:
box-shadow: inset 0 0 0 0.5vw #991b1b, inset 0 0 0 1vw #f1f1f1; it should give you the more traditional rounded corner look.