0

I can't get border-radius property work on IE8, even with PIE.

What I am trying to do ?

A progress bar

HOW ?

A parent div with round border (border-radius: 15px) and a grey background. A child div (rectangular) with green background. The child corners should be hidden outside of the parent shape (overflow:hidden).

Problem :

On IE8, the parent shape has round corners but the child div has not (You can get the same result on other browser by removing overflow: hidden)

Why this solution "Overflow:hidden for rounded borders using css3pie in IE8?" does not answer my problem ?

I don't want my child div to have round corners, for instance at 61% (see my JSFiddle), the right side of the green shape is rectangular. (I don't want to 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 TO SEE THE RESULT ON IE8 : */
    overflow:hidden;
}

.progress {
    height: 100%;
    background: #5F5;
}

Does anyone has an idea to deal with it ?

Community
  • 1
  • 1
Apolo
  • 3,844
  • 1
  • 21
  • 51
  • You shouldn't bother. It's far easier and it's going to be better (cleaner and more performant) to simply have a square progress bar in IE8 and below – Bojangles Jun 27 '14 at 15:15
  • Well, for now it is the fallback, but for some people (whose problem is not a progress bar) it could be a blocking problem. I will leave this question open and hope someone will find a workaround. – Apolo Jun 30 '14 at 09:41

0 Answers0