Fake CSS3 gradient borders

Turns out you can fake some nice gradient borders with the :before and :after CSS3 pseudo tags!

Here's an example:
http://codepen.io/murphyrandle/pen/bAjBi

Tricks to remember:

• The div to receive the borders should have some position attribute other than the default. I like position: relative because it doesn't modify the default CSS placing of the element, but it allows sub-elements to be positioned relative to itself.
• The pseudo-elements should use position: absolute and that absolute positioning will be absolute relative to the div you are trying to make the borders for.
• Have a lot of fun while you're doing it.