How-to do an emboss effect in CSS3?

You can found a lot of tutorials online on how-to use drop shadows in CSS3 but not that many show the full emboss effect with an inner top shadow and a bottom reflection to emphasis the depth.

This will only work with browsers supporting the rgba property. (Hint: not IE)

{
    /* Background */
    background: rgba(0, 0, 0, 0.2);

    /* Border bottom light */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* Inner top shadow */
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);

    /* Round corners */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}