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

    On IE 6, this CSS Not working.

  2. Raj says:

    After this use not any change IE Browser….

  3. Kat says:

    I find that this conflicts with IE7’s z-index and positioned elements. The background of the element falls below all other elements overlapping the one with the behavior attribute attached to it.

  4. Shraddha says:

    ?I have tried it but its not working for me please help me.

  5. zonehui says:

    this programe is very good

  1. May 7, 2013

    […] am trying to add rounded border to my div. In firefox it is working. On Net i found this link http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser. I have adding the htc file. I included it in the root, as well as my css folder but it is not […]

  2. May 31, 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 […]

  3. October 28, 2013

    […] Arbeiten mit runden Ecken im IE aber sehr bequem. Neben CSS3PIE gibt es den Ansatz auch noch bei HTMLRemix. Beide Projekte verwenden VML (Vector Markup Language) um CSS3 bedingt für den IE zur Verfügung […]

  4. February 10, 2014

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

  5. March 17, 2014

    […] he encontrado la solucion del border-radius en ie8 http://www.htmlremix.com/css/curved-…-cross-browser Pero en firefox funciona bien Pero en internet explorer me aplica un borde fina Pueden chequearlo […]

  6. March 27, 2014

    […] solución para poder ver nuestros elementos redondeados en IE 6, 7 y 8. Es un script escrito por Remiz y muy fácil de usar. Sólo tienes que seguir estos […]

  7. July 7, 2014

    […] Curved corner (border-radius) cross browser | HTML Remix border-radius.js – JavaScript ライブラリー – HTML5.JP […]

  8. December 1, 2014

    […] While you’re waiting.. Curved corner (border-radius) cross browser […]

  9. December 2, 2014
  10. December 23, 2014

    […] While you’re waiting.. Curved corner (border-radius) cross browser […]

  11. December 23, 2014
  12. January 6, 2015

    […] While you’re waiting.. Curved corner (border-radius) cross browser […]

  13. January 6, 2015
  14. January 17, 2015

    […] Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser […]

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