title: border-radius for progress bar progress
body: <p>When the bar is not yet to reach 100%, I want to keep the edge without rounded effect.. What I did is use if then change the css of the bar, but it's one step behind.. take a look</p>
  
  <p><a href="http://jsfiddle.net/xjkhH/" rel="nofollow">http://jsfiddle.net/xjkhH/</a></p>
  
  <p>you need to hit once more even it reached 100%</p>
  
  <pre><code>$('#test').on('click', function (e) {
      $progress_bar = $('#progressbarr');
  
      //convert to percent
      var progressbar_width;
  
  
      progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());
  
      var i = progressbar_width + 10; // change in percent
  
      if (i &lt; 101) {
  
  
          $progress_bar.find('div').css('width', (i + '%'));
  
          $progress_bar.find('span').text(i + '%');
  
  
      } else {
          $progress_bar.find('div').css('border-top-right-radius', '4px');
          $progress_bar.find('div').css('border-bottom-right-radius', '4px');
  
      }
  
  });
  </code></pre>