Enabling border-radius in IE 6-8

[Cupidvogel]

Hi, I want to write code that will render rounded borders in IE 6-8 versions too. I have tried many approaches, including using some jQuery plugins that has received great reviews in this respect, I have used HTC files, I have used Curvycorners, no effect. Can somebody give me a step by step analysis on how to do it?

[Cupidvogel]

Yes, when I said HTC file, that is exactly what I tried, no result.

[jamygolden]

Try CSS3PIE – works for me. I usually allow IE to see the corners though. They are squares anyway.

[Cupidvogel]

Same problem, not working. I uploaded all the files (PHP, JS and HTC) into the www directory of Wamp (the same directory where I have stored the test HTML page), configured the htaccess and mime files of Wamp to allow HTC files to be loaded, and set the behaviour to the absolute path to the HTC file: http://localhost/PIE.htc. Still no effect in IE 6-8…

[Paulie_D]

I seem to recall that a lot of these solutions (CurvyCorners for instance) don’t always work locally. I think you have to deploy them for them to work.

But I’m with jamy_za, if they have IE…let them eat square corners. That’ll teach them.

[SgtLegend]

I can probably offer you the best solution, don’t worry about IE having square corners. IE is old and attempting to support CSS3 features is just going to waste your time, simply make your website gracefully degrade in IE8 and below and for all modern browsers make it look cool with rounded corners.

Also another solution would be to drop IE6 support, unless your website is going to be targeting corporate companies that still use the insecure hunk of junk don’t even bother going near it as you will continue to waste time you can be spending on something else.

[ananthan_iyer]

I also face the same problem and I made a curve border in photoshop and put as a background.

[Senff]

Hmmm….. I may be in the minority here, but in my opinion saying “it’s IE, dont bother about supporting it” is not really a helpful response to someone who wants to make something work in IE. I’m sure he/she has his own reasons for it.

;)

@Cupidvogel : best to put your code online somewhere so we can give it a look.

[Cupidvogel]

The code is rather simple:

div {

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

behavior: url(PIE.htc)

}

Initially I tried to work locally, i.e keeping the HTML file and the Pie files in the desktop, but that didn’t work. Then I uploaded them to Wamp, configured the htaccess file (kept in the www root directory) and also the mime-types file to enable htc file loading, even now it doesn’t work.

[Senff]

What I meant, is to put the site online so we can see where it might go wrong. For example, the path to PIE.htc could be wrong (or, if you use plugins, the paths to the .js files), which we wouldn’t able to see without a live site.

[Cupidvogel]

Oh no, how do I do that? I don’t have a site, I am trying to learn all it takes to make one! I am using Wamp, how can I put it online???

[dfogge]

“how can I put it online???”
https://css-tricks.com/seriously-just-make-a-jsfiddle/

[jamygolden]

I’ve also written an article about this before.

[ananthan_iyer]

Hi jamy
I go through your link and found that IE 8 its not support and IE 7 bottom boxes working…?

[Paulie_D]

@Schmotty In ideal world that’s fine. Unfortunately, it’s not always possible…I deal with global companies (Fortune 500) on a daily basis and many of them are still using IE6. Try as you might there is nothing you can do to shift them until their IT departments are good and ready.

I serve them a different experience to my clients with more modern browsers but as long as it is functional they won’t know the difference or at the very least will know that the problem is not at my end.

[Author]

Posts