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

750 Responses

  1. hey says:

    hi all. would be a nice thing, but watch out: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
    see the section »Hoops you have to jump through for IE«

  2. karthik says:

    is the htc file a open source ? can we include it in any big proj jus lyk tht., or is there any licencing issues…

  3. Raul says:

    What if we want 5px radius and just on top, the htc file will detect?

  4. Yogesh Foka says:

    Thanks Nick

  5. Randy says:

    Beside the fact that IE should be banned from the Internet, this solution isn’t working for me.

    I have row in a HTML-Table which shold have curved corners while the cells have a background-image (actually just a gradient). Whenever I apply the border-radius.htc the background-image is being removed 🙁

    Did I mentioned that I don’t understand people who are using IE?

  6. Santosh says:

    Its really good see all these effects on IE browsers but the concern is, are these file are legal to use any where/any projects ? or these are copyrighted ?

  7. Orb Web says:

    Hi,
    I used those lines for a while now (a year probably). I didn’t know about the htc file and I thank you for that, but you could complite your code with 2 additional lines :
    -khtml-border-radius:3px; for Linux browsers

    and

    border-radius: 3px; for CSS3

    😉

  8. Mario says:

    Hi, sorry for my english,
    when i use the border-radius in a element in a with overflow and scroll this, the lement with border-radius is fixed.
    How we can change this ?
    Thx and best regards
    Mario

  9. Hugo says:

    I love u 😀

  10. Its not working on joomla template. how to make work over there?
    Regards
    Sagor

  11. Kolya says:

    Doesn’t work when the parent DIV has a background color set.
    The fact that this isn’t documented anywhere isn’t exactly helpful either.

  12. Bobby says:

    I’d also love to get this working on IE6,IE7,IE8 – but the z-index issues are happening to me as well. I’m going to take a look at the code in the .htc (although I’ve never written one of these before) to see if it’s a quick tweak. Any help – especially by the totally awesome original author! – would be appreciated.

  13. Patrick Templeman Twells says:

    Hi, thanks for this, just thought I would note that it doesn’t actually work if you use css gradients on the div. For example, I have a div where if I use the border-radius.htc behavior when it has a solid black background, the corners are as expected. If I use the following for the background, the corners are not round…

    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */

  14. mentor designer says:

    totally ILL its does not work in HTML when we use in proper website HTML.

  15. Jake says:

    This has major issues with IE8, unusable in its current state due to z-index issue + background problems with elements.

  16. Hanamiti says:

    Thank you for this solution. IE must die though, and currently it is slowly dying, 20% and falling 🙂

  17. does this work with just the top two corners
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    or bottom 2?

    • Mark says:

      It works for me on border-radius but not border-top-left-radius and similar properties.

      I hope this can be fixed somehow.

  18. Shaq says:

    doesn’t work on IE8+

  1. December 13, 2011

    […] has created an HTC file (http://en.wikipedia.org/wiki/HTML_Components) called CSS Curved Corner (http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser) that can be downloaded off Google Code […]

  2. December 26, 2011

    […] 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