Creating bevel effect for content box - css

Question

I've been working on a CSS3 stylesheet for a program. This is the current look of it:
As you can see, I like the design because it's very clean - but one thing that strikes me is that it's very flat.
/* REPORT */
.reportBox{
margin: 30px auto;
width: 60%;
height: 20%;
border-radius: 6px;
background-color: #FFFFFF;
padding: 10px 20px;
}
.reportBox li{
list-style:none;
}
.ulReport{
padding-left:0;
}
I want to create more of a separation/contrast between the content and background.
I was wondering how to make the the white square have more of a shadow or emboss effect/bevels look.
Example:
Could someone help show me an example of it using what I have? I'm assuming I have to mess with the borders and different shades from black to white.
Thank you!

Answer 1

Honestly, I like flat UI and a 1px border if it's needed for contrast, but in any case, you can achieve this effect with a double inset box-shadow like so:
.border {
box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}
Demo: http://jsfiddle.net/96saR/

Answer 2

You can use the border:outset CSS rule:
button{
border:5px outset grey;
}
That works well but you have limited control on how the colors look. You can have complete control if you define each color:
button{
border-top:5px solid lightgrey;
border-bottom:5px solid grey;
border-left:5px solid lightgrey;
border-right:5px solid grey;
}
Either one works, outset is easier but defining all the colors gives you more control.
JSFiddle Example