title: Dotted Border turns to solid if object is animated with jQuery
body: <p>I have a simple setup: an image and then a paragraph with a bit of info that is hidden and then slides up over the image on mouse hover. If I try to apply a border-top that is dashed or dotted onto the paragraph it simply turns into a solid line. Is this a known issue with a fix? I even tried adding the dotted border through jQuery and it still comes out as a solid line. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;img src="images/fillertxt.jpg" alt="image" /&gt;
      &lt;img src="images/filler.jpg" class="front" alt="image" /&gt;
      &lt;p class="info"&gt;
          This is a short description with a bit of text.
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrap .info {
      width:204px;
      height:50px;
      background:url(images/infobg.jpg) repeat-x #8d9c0c;
      color:#f7f5ef;
      padding:3px;
      position:absolute;
      top:142px;
      left:0;
      border-top:3px dotted #8d9c0c;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
  $("p.info").css("border-top","3px dotted #8d9c0c");
  $(function(){
     bindTypeOne();
     $("input[type=radio]").click(function(){
        if ($(this).attr("rel") == "type1"){
           bindTypeOne();
        } else if ($(this).attr("rel") == "type2"){
           bindTypeTwo();
        }
     });
  });
  
  function bindTypeOne() { 
   $("div.wrap").hover(function(){
      $(this).children("p.info").stop();
      $(this).children(".front").stop().animate({"top":"141px"}, 400);        
     },function(){
      $(this).children("p.info").stop();
      $(this).children(".front").stop().animate({"top":"0"}, 700);
   });
  };
  
  function bindTypeTwo() {
    $("div.wrap").hover(function(){
     $(this).children(".front").stop();
     $(this).children("p.info").stop().animate({"top":"80px","border-top":"3px dotted #8d9c0c"}, 400);        
    },function(){
     $(this).children(".front").stop();
     $(this).children("p.info").stop().animate({"top":"142px"}, 700);
    });
  };
  
  });
  </code></pre>