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. mahesh says:

    it is working only 4sides but ineed only any of 2 sides or one side is it possible

  2. Neville says:

    Hi,

    I placed the .htc in the main directory and I can see the page in IE8 with rounded corners to the two .div areas. One though has changed the background to black and I can change it at all. Any suggestions please? http://www.feetfirstpodiatry.co.uk/index21a.html
    Thanks

    Nev

  3. Tobi says:

    Can’t find the download link, urghhh -.-
    Just kidding.
    Cool tool – thanks! 😉

    • Devesh says:

      Hi I have use this htc file but not find the solution in ie8 and ie7 plz tell me right way to use this htc file for support of border radius & box shadow in ie8 & 7 also.

      thank you

  4. james at uk deals says:

    nice .. worked on firefox very well .. but not with IE8.. thank you very much

  5. KC Seo says:

    Great work, does it work with the new ei?

  6. Matt says:

    Hi,
    I can’t seem to get this working. Where would I put the .htc file? I’m using drupal. I have placed the htc file in root directory and placed the path in the css file as
    behavior:url(border-radius.htc);

    Any help with this would be really appreciated.
    Matt

  7. nospam says:

    This fix sounded promising, unfortunately it didn’t work for me. I followed the instructions precisely.

  8. Miguel says:

    For me it doesnt works. Still IM looking for a solution for that IE, otheriwse I will not mind to care about IE, but some users still use it.
    Thank tou for all.

  9. Tony says:

    Just in case nobody realizes it IE also has a vendor prefix of -ms-
    At the time of these posts IE wasn’t a very good browser but, as of late 2012, it seems the people at Microsoft are trying to get their stuff together and making their browser more designer/developer friendly. Thanks Microsoft, for waiting 20 years to catch up.

  10. components of a business plan says:

    I really like it when individuals get together and share thoughts.
    Great blog, keep it up!

  11. stikmaar says:

    great it works!

  12. skeej says:

    how do get it to work with a:hover?

  13. kursus website says:

    thank you for your css trick. i like it.

  14. vc says:

    define a background color to avoid a black background.

  15. Michi says:

    thx for the htc file, it works great!

    If I have a “div-box” in a “div-box”, the background of the first box will be black. 🙁
    No Problems with one div-box!

  16. Hunter says:

    not work with background

  1. September 20, 2012

    […] you need to do is download the htc from HTMLremix or Alternate Link and include the following code in your […]

  2. November 23, 2012

    […] to Remiz Rahnas for writing the original script that this is based off […]

  3. February 1, 2013

    […] to Remiz Rahnas for writing the original script that this is based off […]

  4. February 24, 2013

    […] can be used in an IE-only stylesheet. Remiz Rahnas of HTML Remix has created an HTC file called CSS Curved Corner that can be downloaded off Google […]

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