html - Overflow & border-radius : PIE not working -
i can't border-radius
property work on ie8, pie.
what trying ?
a progress bar
how ?
a parent div round border (border-radius: 15px
) , grey background. child div (rectangular) green background. child corners should hidden outside of parent shape (overflow:hidden
).
problem :
on ie8, parent shape has round corners child div has not (you can same result on other browser removing overflow: hidden
)
why solution "overflow:hidden rounded borders using css3pie in ie8?" not answer problem ?
i don't want child div have round corners, instance @ 61% (see jsfiddle), right side of green shape rectangular. (i don't want add border-radius
property on it)
code & demo ?
jsfiddle : link
html :
<div class="container"> <div class="progress" style="width:61%"></div> </div>
css :
.container { width: 200px; height: 30px; border: solid 1px black; position: relative; background: #aaa; border-radius: 15px; behavior: url(/content/pie.htc); /* remove see result on ie8 : */ overflow:hidden; } .progress { height: 100%; background: #5f5; }
does has idea deal ?
Comments
Post a Comment