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:

/

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 bee curved when it fully fills the red bar. Can someone suggest the best way to implement this?

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/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 bee curved when it fully fills the red bar. Can someone suggest the best way to implement this?

• javascript
• jquery
• html
• css

3 Answers 3

Just add overflow: hidden to the #topDiv

JSFiddle

Since the #childDiv is a child of the #topDiv, this should do the trick:

#topDiv { overflow:hidden; }

To answer the question however, to dynamically change border-radius, try this:

$("#childDiv").css('border-radius', '10px');

But in your case, the overflow property is the best implementation.

Inside of your $("#change").click() function, place this conditional statement. It will pare the widths of the two divs and if th child width is greater than or equal to the top div, it will adjust your border radius of the child div.

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

    var filled = $("#childDiv").width() >= $("#topDiv").width();
    $("#childDiv").css('border-radius', filled ? '10px' : 0);
});