Question

I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I’m going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).

What’s the best way to do this with CSS?

Answer 1

Your best bet is to use an image to be compatible with older browsers. For CSS you’ll use box-shadow but IE9 is the first IE to support box-shadow.

That being said you’ll need to use two box-shadow properties if you want to use CSS. You’ll need to do two of them.

Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/

Here is a vague idea of what to do

<div id="leftBorder">
  <div id="rightBorder">
    <div id="content">Content here</div>
  </div>
</div>

#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}

Alternatively you can potentially set just the border property alone bit it won’t give you the nice fuzzy shadow look.

It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it’s not pretty.

http://www.alistapart.com/articles/cssdrop2/