CSS3 PIE call not working

Question

I have a site here...

View it in Chrome/FF, and you'll see the labels come up with rounded corners. IE8 still showing squared corners.

Here's the CSS where I have my PIE being called...

.class-name { background-color: #fff; float:left; margin: 10px 5px 10px; height: 15px; line-height: 15px; vertical-align: middle; padding: 15px; width: auto; font-size: 14px; font-weight: bolder; color: #000000; text-align: center; 

    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;

    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-toopleft: 20px;

    border-radius: 20px; /*PIE only supports parsed CSS (Shorthand) */
    behavior: url(PIE.htc); }

I have the PIE files located in my root folder. I just don't understand what I'm missing here...

Answer 1

It looks like it only supports the shorthand notation.

Shorthand only

For all CSS properties which PIE parses, only the shorthand versions of those properties will be recognized. For example, while border-radius is supported, the individual longhand border-top-left-radius etc. properties are not.

The reason for this is the same reason URLs are not resolved relative to the CSS file (see above): PIE does not have visibility into where each style property comes from. If there is both a shorthand and a longhand property present, PIE cannot determine the order in which the CSS author specified those properties, nor can it determine the specificity of the selector for each property. It cannot therefore make an informed decision about which property should take precedence.

To avoid making dumb guesses, we have opted to only support shorthand properties. Shorthand was chosen over longhand to keep file size small and avoid tedious repetition.

Source: http://css3pie.com/documentation/known-issues/#shorthand

Answer 2

In 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners.

quote from Border Radius for IE8