Grow your CSS skills. Land your dream job.

Enabling border-radius in IE 6-8

  • # April 20, 2012 at 9:46 am

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

    # April 20, 2012 at 10:53 am

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

    # April 20, 2012 at 11:03 am

    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
    # October 12, 2012 at 4:34 pm

    hey
    StevenBullen,
    its worked very well :)

    # February 22, 2013 at 2:49 am

    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

    # February 22, 2013 at 3:43 am

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

    # March 6, 2013 at 1:47 am

    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

    # March 6, 2013 at 5:25 am

    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/

    # March 6, 2013 at 11:10 am

    Once again: please don’t do this.

    # April 10, 2013 at 3:31 am

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

    # April 10, 2013 at 3:49 am

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

    # April 15, 2013 at 9:11 am

    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?

    # April 15, 2013 at 9:13 am

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

    # April 15, 2013 at 9:19 am

    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

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".