Hola tomuer puedes usar la propiedad css3
box-shadow, la cual no es soportada aún por todos los navegadores. O como alternativa a esto puedes anidar cajas flotadas a la caja que desees sombrear, eso si, necesitaras 5 cajas más de la que tienes.
O sea:
<div id="papi">
<div id="top"></div>
<div id="left"></div>
<div id="center">... aqui el contenido... </div>
<div id="right"></div>
<div id="bottom"></div>
</div>
#papi{overflow:hidden;}
#left, #center, #right{ float:left; }
#papi, #top, #bottom{width:100px;}
#top{background-image:url(...imagen...);}
#bottom{background-image:url(...imagen...);}
#left{background-image:url(...imagen...); width:/*ancho de tu borde izquierdo p.ej:3px*/;}
#center{background-image:url(...imagen...); width:94px;}
#right{background-image:url(...imagen...); width:3px;}
y luego dar los background-image necesarios para cada caja, en donde incluirás los pedazos de sombra que hallas previamente cortado en un editor de imagenes como por ejemplo photoshop.
Este ejemplo puede serte util en cajas de alto variable digamos (que crecen con el contenido que vallas incluyendo)
Si, en cambio el destino de tu caja sombreada es ser de alto fijo digamos, (por ejemplo nose, 100px y que ya no crezca más de ahi)
entonces puedes usar dos cajas menos:
<div id="papi">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
... ah, y algo muy util y funcional, usar
sprites css para las imagenes,
esta aplicación es la que uso yo para generar sprites:
#papi{width:; height:; overflow:hidden;}
#left, #center, #right{ float:left; background:(sprite.xxx) no-repeat;}
#papi, #top, #bottom{width:100px;}
#left{ width:; height:; background-position: ... posicion de la imagen para el borde izquierdo... ;}
#center{
width:; height:;
background-position: ... posicion de la imagen para el centro,
esta imagen debe poseer el borde superior e inferior... ;
background-repeat:repeat-x;
ya que repetimos la imagen en x y generamos el efecto
}
#right{ width:; height:; background-position: ... posicion de la imagen para el borde derecho... ;;}
Cuando crees el sprite hazlo de modo que tenga esta forma:
|_
|_| 1
|_| 2
|_| 3
1 = borde izquierdo
2= imagen para el centro que repetimos en x, aca incluí los bordes top y bottom.
3 = borde derecho
Bueno, espero haberme explicado, ya sabes, si tienes alguna duda nada más pregunta y vemos.
Un saludo.