animated border on a div

Question

I tried following code to get an animated border on a div but i am not able to get it on left and right side.here is my code

<div id="test">test</div>
#test
{
position:absolute;
width:200px;
top:100px;
left:50px;
-moz-border-image:url(http://i.imgur.com/GziKo.gif)   8 0 stretch;
}

here is fiddle http://jsfiddle.net/ahvSR/30/
Thanks
Edit

Although @Mihalis Bagos solution is good. But i am not interested in wrapper div i want some thing on test div or border-image

New Edit

i have done it using border-image now my image is 4x4 pixels before it was 8x8 pixels.Fiddle is here http://jsfiddle.net/5rHCa/

But please can anyone explain thoroughly why it was not working with 8x8 pixels.

Final Edit It can be done through 8x8 pixel also but no stackoverflow user got the mistake in my fiddle.See my answer.

Another Final Edit

The fiddle i have posted using 4x4 and 8x8 http://jsfiddle.net/5rHCa/ and http://jsfiddle.net/LzS7b/ are not working on firefox 3.6 does anyone have idea why these are not working on firefox it is working on chrome though.

Answer 1

Consider a parent div, which has the animation as the background and the padding you would like the border thickness to be, ie:

<div id="wrapper"><div id="test">test</div></div>
#test
{
    background-color: white;
    width:100%;
    height:100%;
}
#wrapper
{
    width:200px;
    top:100px;
    left:50px;
    position:absolute;
    padding:2px 0px;
    background: url(http://i.imgur.com/GziKo.gif)   top left;
}

For cross-browser compatibility. The sample works fine on firefox

Answer 2

Use different AnimGif with transparency in the center;

http://jsfiddle.net/ahvSR/32/

Answer 3

Since you are using CSS3, you can try this method http://jsfiddle.net/ahvSR/31/. If you need thin borders, then you could make your image thin to the size you need.

Answer 4

Actually all through my in first fiddle i was not using the border-width property. So for using border-image property i think so border-width is necessary.here is my final fiddle with original 8x8 image all those people which were saying about image size it was wrong actually i was missing border-width. Thanks

http://jsfiddle.net/LzS7b/