CSS pie doesn't work in IE 8, but works in IE 9

Question

I use the following code for the border radius:

.box { width:250px; height:250px; background:#ce0000; border-top-left-radius: 15px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 15px; behavior:url(images/PIE.htc); } 

It worked fine in IE 9. But it does not work in IE 8. What am I doing wrong?

Answer 1

In documents, PIE only supports abbreviated border-radius rules:

For all CSS properties that PIE parses, only shortened versions of these properties will be recognized. For example, while the border radius is supported individually, border-top-left-radius, etc. no properties.

The reason for this is the same reason that URLs are not resolved relatively to the CSS file (see above): PIE has no visibility where every style of property occurs. If there is both a shorthand and a longhand property present, the PIE cannot determine the order in which the CSS Author specified these properties and cannot determine the specificity of the selector for each property. Consequently, it cannot make an informed decision about which property should take precedence.

To avoid stupid guesswork, we decided to support only abbreviated properties. The abbreviation was chosen to be long so that the file size was small and avoid tedious repetition.

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

So try changing your CSS:

 .box { width:250px; height:250px; background:#ce0000; border-radius : 15px 15px 5px 5px; behavior:url(images/PIE.htc); }