Can box-shadow effect be applied to just left & right sides of a div?

Question

Is it possible to get a box shadow applied to only the left & right sides of a div?

box-shadow: 0px 0 20px rgba(0,0,0,.4);

I tried changing this to a few varients of:

box-shadow: 0, foo, 0, foo;

but that didn't work well.

In the image below, I want to remove the bottom line (and the top one, but you can't see that in this image).

I would prefer not to use an image if possible.

Div with a box-shadow

score 1 · Answer 1 · answered Dec 02 '13 at 18:16

1

You can do it by setting the box-shadow on :before and :after

div:before {
    box-shadow: -15px 0 15px -15px inset;
}
div:after {
    box-shadow: 15px 0 15px -15px inset;
}

answered Dec 02 '13 at 18:16

APAD1

that just turns out to be a messy solution and does not look well cross browser – Patrick Keane Dec 03 '13 at 09:54
1

Messy how? It works fine in IE, Safari, Firefox and Chrome. If you are rude to people who respond to your questions, nobody is going to want to help you. – APAD1 Dec 03 '13 at 16:13
I appologise if I sounded rude but I used the code exactly as you have it and its not suitable. The left shadow shows fine, the right shadow is offline, positioned below the container. http://jsfiddle.net/QpHu7/ Anyways I decided not to find a fix for it and did something else instead. – Patrick Keane Dec 09 '13 at 10:18

score 0 · Answer 2 · answered Dec 02 '13 at 18:18

0

Basically the way to do it is to use another box shadow on top of it so you css would look like this:

box-shadow: 0px -45px white,0px 22px white, 2px 0 20px rgba(0,0,0,.4)

answered Dec 02 '13 at 18:18

Hive7

this adds white above the div which overlays ontop of my navagation menu. Not a useful tip. – Patrick Keane Dec 03 '13 at 09:46
Just to reiterate, not a useful tip for my current situation... Could be useful for others though :) – Patrick Keane Dec 09 '13 at 11:32

2 Answers2