Progress bars challenge

HTML

<p>Notice how the bars, when just starting to fill the outer bar, are hiding its rounded corners</p>
<div id="wrapper">
<div id="outer">
    <div id="middle">
        <div id="inner"></div>
    </div>
</div>
</div>

<h1>Possible solutions</h1>
<ol>
<li>Create a sprite of the three bars when full, and then showing a portion of it via width will work as expected. Pretty Limiting.</li>
<li>Create a sprite with four corners, on their outer side is the solid background color, their insides are transparent. Absolutely position on the corners to 'force' rounded corners. Still somehow limiting - border radius and background color</li>
<li>Create a similar mask, only with SVG. Less limiting, but might take more time and support is worse.</li>
<li>...Anything else?</li>
</ol>

CSS

body {background: #555;}
#wrapper{position:relative}
#outer { width: 400px; background: white; margin: 0 auto;overflow:hidden;}
#outer div { width: 0; }
#outer, #outer div {
    height: 40px; top: 0; 
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
      border-radius: 40px;
}

#outer #middle {z-index: 10; background: cyan;margin-left:-40px;width:40px;}
#outer #inner {z-index: 20; background: blue;width:40px;}
body {color: #fff; font-family: sans-serif; font-size: 18px;}

JavaScript

var $middle = $('#middle');
var $inner = $('#inner')
var max = $('#outer').width() + 40;
setInterval(function() {
    $middle.css({
        'width': ($middle.width() < max) ? $middle.width() + 5 + 'px' : $middle.width()

    });
    $inner.css({
        'width': ($inner.width() < max) ? $inner.width() + 3 + 'px' : $inner.width()

    });
}, 175);