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 4×4 pixels before it was 8×8 pixels.Fiddle is here http://jsfiddle.net/5rHCa/

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

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

Another Final Edit

The fiddle i have posted using 4×4 and 8×8 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

Use different AnimGif with transparency in the center;

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