Forums

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?

karlpcrowley

Hi, try this
http://fetchak.com/ie-css3/

Cupidvogel

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

jamy_za

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???"
http://css-tricks.com/seriously-just-make-a-jsfiddle/

jamy_za

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...?

Schmotty

I believe as web designers that we should take a stand against outdated browsers. We should design our ie6 versions to simply say "Your browser is too old to view this site. Please upgrade."

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.

StevenBullen

Ok I have simplified it down to a basic shell. Test this on your web server and see if it works. EDIT: I forgot to mention that this was using what @karlpcrowley recommended first of all

Download

If this does not work then it might be the way the file is being requested from the server. Basically instead of text/x-component it might be requested as a text/html which will cause it not to work.

You can fix this problem one of two ways....
1st I have added a file called ie-css3.php which requests the file with the correct headers.
Just change

behavior: url(ie-css3.htc)

for

behavior: url(ie-css3.php)

2nd You can add an .htaccess file that does it for you which I have also added.

If it's not working then I am stumped. :)

ray

hey StevenBullen, its worked very well :)

samkat

After some tries I found one thing It does not work for id but it works very well with class

I mean

    #rounded_corners {
                     behavior: url(ie-css3.htc)
    } //does not work

   .rounded_corners  {
                     behavior: url(ie-css3.htc)
    } //works perfectly

HugoGiraudel

Please don't do this. Loading kilobytes of polyfills for aesthetics reasons is not good UX.

dihanalex

Dear al my friends, i am new member css-tricks. please any body help me? I also face the same problem and I made a css3 border radius in IE6,7,8 and 9 does not supported. any body please give sample complete document or ready file.

please any body help me. thanks by dihan dihanalex@gmail.com

Paulie_D

IE9 does support border-radius.

I wouldn't bother with it in lower versions as the various solutions all have their faults.

However, if you must then...

https://code.google.com/p/jquerycurvycorners/

Or

http://css3pie.com/

HugoGiraudel

Once again: please don't do this.

shankarkhanal

The W3C CSS Validation Service Property behavior doesn't exist : url(js/PIE.htc) why?

CrocoDillon

Because it's not part of the standard, but an IE legacy thing. http://reference.sitepoint.com/css/behavior

diyafury

I'm using csspie with no issues in a LESS mixin for border-radius. Works like a charm... I have come across one issue...

I have an border radius on a parent element with a grey background colour and it's child with a white background colour... The issue that I'm having is that after pie runs, the white background of the child element disappears. When I hover the parent element, the child element changes its background-colour, so I'm confident it's not the css. It seems to be an issue with pie.htc... has anyone come across this issue and have very cleverly devised a handy fix?

diyafury

Apologies for that first sentence.... ignore 'with no issues' ;) And... the child element also have border-radius (pie.htc behaviour) applied.

diyafury

Hi guys..

It's a know issue with static positioned elements: http://css3pie.com/documentation/known-issues/ , change the nested child element to position:relative fixed it.

Cheers

treehouse : what would you like to learn today?

Forums

[Solved] Enabling border-radius in IE 6-8