HTML Remix - Dont copy code, remix it!

September 24, 2008

Curved corner (border-radius) cross browser

Posted by : Remiz
Filed under : CSS

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 :)

  • Comments (203)

203 Responses to “Curved corner (border-radius) cross browser”

  1. Lidocain says:

    @ iMezied :

    You can’t specify which corner to curve. This HTC for border-radius can only round the 4 corners at once with the same radius.
    It’s a limitation of Microsoft’s VML (used to make these rounded corners in IE 5-8). It’s “all rounded the same” or “none rounded” ;)

  2. Sanat says:

    You’re a lifesaver :) Keep up the good work

  3. iMezied says:

    how i can specific which corner i need to curve
    eg. right top corner or left top corner only can be curved ?
    thanks :)

Leave a Reply