title: How to animate border-top effect
body: <p>When you hover over "Login,Sign up" acorns website (<a href="https://www.acorns.com/" rel="nofollow">https://www.acorns.com/</a>)  you can see animation going along. So I have a li</p>
  
  <pre><code>.navbar  li{
      display: inline-block;
     border-width:5px;    
     border-top-style:solid;
     border-top-color: white;
  
  }
  
  .navbar li:hover, .navbar li:active{
     border-width:4px;    
     border-top-style:solid;
     border-top-color: #e0b82b;}
  </code></pre>
  
  <p>How is it possible to make the border-top animated ? Like shown above. Thank you.</p>
  
  <p><a href="http://jsfiddle.net/9mfccz6w/" rel="nofollow">http://jsfiddle.net/9mfccz6w/</a>
  I'm trying to animate top bar (yellow)</p>