HTML/CSS "shadow" border?

Question

I tried looking in Chrome's Inspect Element, but I could not find out how this page here [ http://www.mousehuntgame.com/ ] makes a shadow type border? On either side of the middle box [with all the page content], it fades to a darker blue, creating a shadow effect.

I want to use that for my website. What's the code? Is it CSS? Thanks!

Answer 1

They're using an image:

(it's actually 1px high, I just stretched it here for clarity)

You could do it with CSS3's box-shadow, see here for a rough example: http://jsfiddle.net/B9Uyj/1/

To make box-shadow work in older versions of IE, you can use CSS3 PIE. (It already works in IE9)

An image would be the easiest option here.

Answer 2

if you want CSS3 you can style your text with

text-shadow: red 2px 2px 2px;

do box shadow with

-moz-box-shadow: 6px 6px 5px #CCC;
-webkit-box-shadow: 6px 6px 5px #CCC;
box-shadow: 6px 6px 5px #CCC;

for simplicity of background gradients you can use this site http://gradients.glrzad.com/