Border Gradient [duplicate]

Question

I'm trying to make the border of a div have a gradient as seen here, under the 'Gradient' heading.

I've put the code shown on this site into a jsfiddle, here, but as you can see, it doesn't work.

.border_gradient {
    border: 8px solid #000;
    -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    padding: 5px 5px 5px 15px;
    width: 300px;
}

Can anyone point me in the right direction for how to accomplish such a gradient? Thanks in advance.

Answer 1

As suggested by codehorse, using box shadow inset accomplishes what I'm looking for, and with much less code at that. Thanks guys!

Answer 2

This css declaration will only work under mozilla browser

.border_gradient {
    border: 8px solid #000;
    -moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:    #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors:   #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
}