Jump to content

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

Recommended Posts

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.

Link to post
Share on other sites

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 by Genert
Link to post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...