No Image CSS Drop Shadows

I was playing with this design, and I came up with a technique so cool, I just had to post it and see if anyone could help give it a final touch.

This is a site I’ve been working on. CollegeRecruiter.com

Notice the Featured Employers box?

A shadow around the entire box (even with rounded corners in Firefox) without the use of a single image. NO IMAGES!!!!

By using border-right and border-bottom instead, I could even make it a standard drop shadow.

Check out the simplified code here:

<div style=”BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; WIDTH: 195px; BORDER-BOTTOM: #ebebeb 1px solid; HEIGHT: 270px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”BORDER-RIGHT: #d7d7d7 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #d7d7d7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #d7d7d7 1px solid; WIDTH: 193px; PADDING-TOP: 0px; BORDER-BOTTOM: #d7d7d7 1px solid; HEIGHT: 268px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”BORDER-RIGHT: #bdbdbd 1px solid; BORDER-TOP: #bdbdbd 1px solid; BORDER-LEFT: #bdbdbd 1px solid; WIDTH: 191px; BORDER-BOTTOM: #bdbdbd 1px solid; HEIGHT: 266px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”MARGIN: 10px; WIDTH: 195px; WHITE-SPACE: nowrap; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

Some content

</div></div></div></div>

Amazing or no? Please post your comments! There is a problem with getting Firefox to display the padding or margins correctly on the inner most box. If anyone can come up with a solution, I’d be glad to rework and post a tutorial or something.