DIV con bordes solido y sombra

Lo primero que vamos hacer es colocar un borde solido a nuestro DIV . 

.estilo_div{
  background:#ff6600;
  border-radius:15px;
  height:100px;
  width:250;
}

Vista previa:

Ahora vamos a darle la propiedad [ border: solid ].

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  height:100px;
  width:250;
}

Lo primero es la propiedad llamada [ border ], lo segundo es decirle que nuestro borde va a ser solido [ border:solid ], despues le diremos que el grosor de nuestro borde queremos que sea de 10px [ border:solid 10px ] y por ultimo de decimos de que color queremos que se muestre nuestro borde [ border:solid 10px #ccc ].

Que nos arroja como resultado:

Ahora pasaremos a darle un aspecto mucho mejor a nuestro DIV con la propiedad [ box-shadow ] que nos trae CSS3. el cual nos da un aspecto de sombra a nuestro DIV.

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: 8px 8px 10px 0px #818181;
  height:100px;
  width:250;
}

Dándole esta propiedad a nuestro DIV le estamos diciendo que queremos colocar un [ box-shadow ] que significa "caja de sombra".

1. El primer parámetro que le damos es la distancia en el eje X, en este caso le estamos diciendo que corra 15px en el eje X. 
2. El segundo parámetro es la distancia en el eje Y , al igual que en el anterior le estamos diciendo que corra 15px en el eje Y. en este caso si queremos que la sombra corra hacia la izquierda o hacia arriba le anteponemos el signo negativo "-15px". 
3. El tercer parámetro es opcional e indica el radio utilizado para difuminar la sombra. Si se utiliza el valor 0, la sombra se mostrara como un color solido.
4. El cuarto parámetro también es opcional e indica el radio con el que se va a expandir nuestra sombra. si establecemos un valor positivo, nuestra sombra se expande en todas las direcciones, y si por el contrario colocamos un valor negativo nuestra sombra se comprimirá.
5. la quinta propiedad es para darle el color que deseemos a nuestra sombra. 

Arrojando como resultado:

Otro ejemplo seria

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: 0px 20px 15px -15px #818181;
  height:100px;
  width:250;
}

Vista previa:

También podemos que nuestra sombra no se muestre en la parte externa de nuestro DIV sino que vamos a decirle a nuestra sombra que expanda en la parte interior de nuestro DIV, colocando una palabra clave llamada [ inset ].

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: inset 0px 0px 20px #818181;
  height:100px;
  width:250;
}

Vista previa:

Si deseamos que nuestra sombra tenga transparencia y no sea difuminada, podemos crear esta transparencia con la propiedad "RGBA", que es la misma "RGB" pero esta añade un canal alfa "A" de transparencia de color CSS3. En el siguiente ejemplo veremos como le daremos una sombra negra interna con una transparencia del 50% aplicando "RGBA" a nuestra sombra, en las posiciones 10px en el eje X y 10px en el eje Y.

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: inset 10px 10px RGBA(0,0,0,0.5);
  height:100px;
  width:250;
}

Vista previa:

Con CSS3 no solo podemos darle un solo color a nuestro DIV sino que también podremos definir múltiples sombras con diferentes colores cada una, esto lo podemos hacer definiendo diferentes sombras y separarlas con "comas" " , "

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}

Vista previa:

Pero hay que recordar una cosa importante a la hora de la compatibilidad en los navegadores existentes puesto que todos no soportan esta propiedad de CSS3  ya que es nueva, para darle compatibilidad debemos anteponer propiedades según el navegador. 

Para Google Chrome y Safari debemos anteponer la propiedad [ -webkit- ]

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  -webkit-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}

Para Mozilla Firefox debemos anteponer la propiedad [ -moz- ]

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  -moz-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}

Para Opera debemos anteponer la propiedad [ -o- ]

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  -moz-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}