CODEWITHSUNDEEP
borderwrappercss
omyzach
omyzach

Reputation: 77

Duplicating box-shadow for bottom on top

I'm having issues getting the CSS3 box-shadow to look correct.

I currently have a box-shadow on my content wrapper like so:

border: 1px solid #D5D5D5;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 2px #DADADA, 0 -3px 0 #E6E6E6 inset;

I'd like the box shadow to appear on top of the content box, exactly how it appears on the bottom of the box. I just can't seem to get it right.

Upvotes: 0

Views: 104

Answers (1)

Matt Coughlin
Matt Coughlin

Reputation: 18906

Not sure if I'm clear on what you're trying to do, but how about adding a third drop-shadow for the top, if the second one works fine on the bottom:

box-shadow: 0 0 2px #000, 0 -3px 0 #E6E6E6 inset, 0 3px 0 #E6E6E6 inset;

Or replace the second drop-shadow with the third one, if you wanted the inset drop-shadow on the top rather than on the bottom:

box-shadow: 0 0 2px #000, 0 3px 0 #E6E6E6 inset;

Upvotes: 1

Related Questions