Using jQuery animate with border attribute
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
        &lt;!--&lt;SCRIPT type="text/javascript" src="jquery-1.8.3.min.js"&gt;&lt;/SCRIPT&gt;--&gt;
        &lt;SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/SCRIPT&gt;
        &lt;style type="text/css"&gt;
            #content {
                border:0px solid #ff9999;
                width:0px;
                height:0px;
                padding:3px;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;input id="btn" type="button" value="Animate"/&gt;
        &lt;div id="content"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;script&gt;
        $(document).ready(function(){
            $('#btn').click(function(){
                $('#content')
                .animate({
                    "borderLeftWidth":"1px",
                    "height":"400px"

                },1000)
                .animate({
                    "borderBottomWidth":"1px",
                    "width":"400px"
                },1000)
                .animate({"borderRightWidth":"1px"
                },1000)
                .animate({"borderTopWidth":"1px"
                },1000)
            });
        });
    &lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p>I am trying to make something useful by using animate function of jQuery. So if you run my code you can see that border-left and border-bottom is generated continuously because I am increasing width and height as well. But after that border-right and border-top just pops up. I want them to be animated as left and bottom border. How would I do that?</p>
