Rounded corners not working in IE, even with PIE.htc

[unplugged_web]

I've got a site that I'm working on that has rounded corners, drop shadows and the occasional gradient. The only problem is I can't seem to get them to work in IE 7 and 8. I've used behavior: (PIE.htc) but that still doesn't seem to be working. Am I doing something wrong? The site I'm working on his here

[tnd1000]

Hello! I went to your site using Firefox, and might I say it looks great. However, drop shadows and rounded corners are parts of CSS3, and are only supported on IE9 or higher. Gradients are HTML5, and only supported by IE9, as well. Here are the tutorials on the subjects: http://www.w3schools.com/css3/css3_borders.asp http://www.w3schools.com/html5/html5_canvas.asp So it's not that you're doing something wrong, it's just the fact that IE 7 and 8 no longer support the newer coding.

[Genert]

Hello. IE 9 has weird thing with border radiuses. Lets take a example:

border-radius: 10px;

It will not work in IE 9. Now you ask why, because it IS supported in IE 9. Well the problem is in common syntax mistake. The working code should look like this:

border-radius: 10px 10px 10px 10px;

IE 9 needs full values for border radius! I can't memorize where did I read that, but it was on a IE article, somewhere And don't forget this:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Edited April 21, 2012 by Genert

[dsonesuk]

Clear a FEW things here border-radius: 9px; DOES work in IE9, it DOES NOT work in IE versions LESS than 9, this is WHY the poster is using PIE.htc along with with behavior: url(../PIE.htc); for every element that uses border-radius to force IE7/8 to show rounded corners. I have used this method (border-radius.htc) before a few years ago, and at that time it would only work for ALL corners, and NOT individual corners. I have tested the PIE.htc version which seems to work on first page load, but breaks and reverts to square corners if you refresh the page.

Edited April 21, 2012 by dsonesuk

[unplugged_web]

Thanks, sorry to be a pain but if it works on the first page only if you don't refresh is there any way to make sure it always works?

[dsonesuk]

I have a strange feeling that the use of filter: progid:DXImageTransform is causing the problem here, I attempted using this before, and brilliant! it works, only to find out if user leaves then returns, or refreshes the page, the effect was gone, and worse still! it caused layout to break. At the end we just let IE users having to live with square edges, or we used rounded corner images to show when the browser was found to be crappy IE.