Change border-radius of div dynamically

Question

I have a red div in the background with curved borders and a yellow div rendered over it with a curved border too. The yellow bar is slowly filling the red bar (to indicate progress, for example). See this fiddle:

http://jsfiddle.net/a6Xy9/3/

Code

<div id="topDiv" style="height:20px; width:200px; background-color:red; border-radius:10px;">
    <div id="childDiv" style="height:20px; width:100px; background-color:yellow; border-top-left-radius:10px; border-bottom-left-radius:10px;">
    </div>
</div>
<br/>
<br/>    
<input id="change" type="button" value="Change Width" style="height:25px; width:100px;"></input>

$("#change").click(function(){
 $("#childDiv").width((parseInt($("#childDiv").width()) + 5) + "px");
});

Now, what I would like is for the yellow bar's right border to be flat (not curved) when it is not fully filling the red bar. But it should become curved when it fully fills the red bar. Can someone suggest the best way to implement this?

Answer 1

Just add overflow: hidden to the #topDiv

JSFiddle