Curved corner (border-radius) cross browser

Update 18 November , 2009: The htc file is updated by Nick F. Thanks man, you got time to check it out. Now supports FF, Chrome, Safari, IE6, IE7, IE8 (Os doesn’t matter).
This version of htc files can be found here and demo here


Update 17 August, 2009: This project is moved to Google Code. Please find the htc files on http://code.google.com/p/curved-corner. Links to htc file below will not work.


Update 16 July, 2009: htc file updated with support for IE8. Thanks to Kevin for coming up with a work-around. New htc file can be downloaded on border radius ie8.


Update 10 June, 2009: Some servers need to set MIME type for HTC to work this in IE6.
To do this, follow the steps.

1. Go to your cpanel and click the MIME Types link
2. Under MIME Type, add text/x-component
3. Under Extensions, add htc
4. Restart Apache Web server


As I’ve pledged, today I’m posting the Curved corner without any js stuff.

For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so. Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE  🙂 . You can download it here. border-radius.htc .

The Demo

1 . I’ve just made: http://www.htmlremix.com/files/20080924-border-radius.zip

The CSS:

  1. .curved {
  2. -moz-border-radius:10px;
  3. -webkit-border-radius:10px;
  4. behavior:url(border-radius.htc);
  5. }

The HTML:

<div class="curved">Curvd div</div>

The explanation :

Do you really want an explanation for this simple 3 line css ?. I don’t think so. Ofcourse if you need, I can.

Browsers :

All browsers 🙂

Download


Many people failed to find a download link. So no one will miss it again now 🙂

Remiz

Remixed version of unstable human emotions and thirst of mankind actions. UX designer, UI developer and HE of WebCastle Media Pvt LTD

You may also like...

748 Responses

  1. Carlos says:

    Never saw it work.

  2. saleem says:

    It is not working in IE Browser.

  3. Works great for me on IE6,7 and 8! IE9 has a native support for curved corners.
    At all:

    don’t forget to set the full relative path in the css rule like this

    .box {
    border-radius: 20px; /* Standard */
    -o-border-radius: 20px; /* Opera 10.x */
    -moz-border-radius: 20px; /* Mozilla/Firefox */
    -icab-border-radius: 20px; /* iCab */
    -khtml-border-radius: 20px; /* KHTML/Konqueror */
    -webkit-border-radius: 20px; /* Webkit/Safari/Chrome/etc… */
    behavior: url(“css/border-radius.htc”);
    }

    Note the “” inside the brackets that make accessible the ie hack (border-radius.htc) even if in the url there are spaces… Thanks!

    PS: Some servers do not recognise the extension htc… if you have php put this trick in the css rule…

    .box {
    border-radius: 20px; /* Standard */
    -o-border-radius: 20px; /* Opera 10.x */
    -moz-border-radius: 20px; /* Mozilla/Firefox */
    -icab-border-radius: 20px; /* iCab */
    -khtml-border-radius: 20px; /* KHTML/Konqueror */
    -webkit-border-radius: 20px; /* Webkit/Safari/Chrome/etc… */
    behavior: url(“css/border-radius.php”);
    }

    and inside the file “border-radius.php” put these lines…

    <?php
    header(“Content-type: text/x-component”);
    include(“border-radius.htc”);
    ?>

  4. Sachin Jain says:

    Definitely, the code works, but only for “border-radius” property only and not for “border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius” properties. Also when we use background property, IE9 avoids it as htc file forces browser to use transparent property mentioned in htc file. And when we include !important to our background value, curves get disappear. Hence, it only works if we needed all corners to be curved.

    Else, code is really good 🙂 Thank you..!

  5. jignesh says:

    IE 7,8 border-radius are not working

  6. Tarique says:

    -moz-border-radius not works in ie8

  7. Shuvendu says:

    sorry! every codes are not working..

  8. SUMEET KUMAR says:

    I have used the code working on all browsers except IE8….plz help if possible… 🙂

  9. kannan says:

    hai shall i use this script for commercial websites

  10. Trapti Gupta says:

    not work on ie browser

  11. Tom says:

    Doesn’t work, buggy as

  12. Shreyo says:

    sorry, the code didn’t work! 🙂

  13. palak says:

    my problem is the dependency issue with the curved border.So plz reply me for this solution.

  14. Grego says:

    Nice…..!!!! Thanks man!

  15. jai says:

    but not works

  16. Himanshu says:

    Hello Remiz,

    I have a problem using CSS 3 transform in I.E.You can see it here http://www.bistrovidalia.com/index.php
    the catering,events,contact us boxes have a background images which have been tilted using tranform property and is awry in I.E.

    Can you please suggest me something for this?

    Regards
    Himanshu Sharma.

  17. clarens says:

    Hello I would like to know how to apply the effect to only the bottom right corner for my div.. please .. and Thanks!

  18. Nasir says:

    ie6,7,8 radius corner not work… !!

  19. DEVENDRA says:

    plz solved my problem of IE Browsers of curved corner

  1. September 5, 2012

    […] IE 全系列浏览器依然不支持这个属性。幸运的是 Remiz Rahnas使用 VML 编写了一个 HTC 文件,为 IE […]

Talk your view

Read previous post:
Template fixed !

Finally , I got a nice simple template for this blog.  Hopefully,  I'll be posting from tommorow :) . I...

Close