This finished product should look like this!
Make sure to simulate the direction light travels in order to get the right effect!
Other techniques use the inset/outset attribute but that will produce different results in different browsers. This method give you more control. The CSS is fairly simple but you must remember to swap border colors for the active state to get the desired depressed effect. Take a look at the source code and CSS to see what I mean.