Grow your CSS skills. Land your dream job.

Enabling border-radius in IE 6-8

  • # April 18, 2012 at 11:17 am

    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?

    # April 18, 2012 at 11:44 am

    Hi, try this

    http://fetchak.com/ie-css3/

    # April 18, 2012 at 11:55 am

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

    # April 18, 2012 at 12:32 pm

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

    # April 19, 2012 at 2:02 am

    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…

    # April 19, 2012 at 4:55 am

    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.

    # April 19, 2012 at 5:23 am

    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.

    # April 19, 2012 at 5:25 am

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

    # April 19, 2012 at 8:59 am

    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.

    # April 19, 2012 at 9:42 am

    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.

    # April 19, 2012 at 9:54 am

    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.

    # April 19, 2012 at 10:06 am

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

    # April 19, 2012 at 11:39 am

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

    # April 19, 2012 at 1:46 pm

    I’ve also written an article about this before.

    # April 20, 2012 at 12:52 am

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

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

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