1
-moz-box-shadow: inset 3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE;

That puts an inner shadow on the left side. Is it possible to have an inner shadow on both sides?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Shamoon
  • 41,293
  • 91
  • 306
  • 570

2 Answers2

3

box-shadow accepts multiple values, so simply repeat your values with a -3px offset:

-moz-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;

But those look more like borders than shadows. Perhaps you should use borders instead, and maybe with box-sizing: border-box in case you can't subtract from width or padding:

border-left: 3px solid #BDD4DE;
border-right: 3px solid #BDD4DE;
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    See also: [Can CSS3 box-shadow:inset do only one or two sides? like border-top?](http://stackoverflow.com/questions/5917412/can-css3-box-shadowinset-do-only-one-or-two-sides-like-border-top) (using borders is more applicable here since you don't blur the shadows at all) – BoltClock Jun 30 '12 at 02:09
0

You can also use it like this

box-shadow:0px 0px 5px Grey

The first and secod value is the offset (use no offset) and the third value is the blur value

Rzv.im
  • 978
  • 7
  • 12