HTML Remix - Dont copy code, remix it!

September 24, 2008

Curved corner (border-radius) cross browser

Posted by : Remiz
Filed under : Programming

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


Incoming search terms:

border-radius htc, border-radius ie, border radius ie, ie border radius, border radius in ie, border-radius ie8, border radius ie8, border radius, border radius for ie, border-radius in ie

Remiz

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

More Posts - Twitter - Facebook


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

  1. Ondreas says:

    Remiz !!! How can I thank you for this “border-radius” solution ??? This is absolutely awesome solution to all the hassle with rounded-corners !!! I’ve checked in almost every available browser and it works beautifully !!! Even in IE 6.0 !!! Firefox, Safari, Chrome, Opera, IE, Flock… everything just works !!! Thank you again !!! Well done !!!

  2. meghan says:

    So the only way I can get this to work is if I have the css included in the actual page?? You can’t link the css in a seperate file?

  3. deborah says:

    Hi – there is a fatal browser conflict with the htc file and prototype.js in IE8. The browser, when trying to load up the page that contains both, immediately crashes. Prototype.js is found at http://www.prototypejs.org/ and is used with effects packages like MooTools. Is there anything you can do to update or fix? Yours is the most elegant solution for IE8 corners I’ve found – I don’t hope to find a better one but I’m stuck with prototype.js and the browser crashing makes it unusuable. Help?

    • Remiz says:

      @deborah : Sad about your situation. But better avoid IE :)

    • Jason says:

      Over at CSS3 PIE (css3pie.com) we’re running into the exact same issue; the current version (but not previous versions) of Prototype causes a crash when used in the same document where PIE.htc is attached.

      I know this doesn’t help you, I just wanted to mention it here in case you find a solution/workaround as I’d be very grateful for that info. :)

  4. Pradeep says:

    this script cannot work in proper manner
    when i implement it in their appl then page show an alert box and when do yes then show it

  5. Alice says:

    Loving, it. But what about Opera? Or I am missing something?

  6. Brad Shaw says:

    To those of you having problems, this works as advertised with a few caveats… from here: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

    * Any element with this hack needs to have position, so unless it already has a position, attach position: relative.
    * It can act funny on some elements that are natively inline, even if you attach display: block, although not all the time (fun!).
    * It also has issues with elements that don’t ‘have layout’. Attach zoom: 1; to get around this.
    * You can only use this on elements with the same border radius applied to all their corners.
    * When using this over anything translucent, a white ghost-line will stroke the rounded rectangle.
    * Don’t even think about combining this with another IE hack, such as a box-shadow filter hack.

    I have made it work in all the places I’ve used it, in containers nested in containers in containers, all with different backgrounds. The containers must have position AND layout which can be done a variety of ways.

    No, you cannot round only one corner or do different radius on different corners.

    You need to apply both a fill AND a stroke to the object or you wind up with a white outline in IE I believe.

    If you can get past these obstacles it works great.

  7. Furqan says:

    Thanks,
    amazing dud.

  8. Greg says:

    Seems to not work if in a container with a background-color.

  9. Patric says:

    Use this one instead, and all your worries are gone…

    http://css3pie.com/

  10. [...] Go here and download the htc file. 2) Place the downloaded file in your images folder 3) In your CSS file, [...]

  11. Serkan says:

    Hi,

    I’ve a with position:fixed and inside it there are anchors with a background-color, and after applying your htc file, the background-color of the anchors disappear and become transparent.

    And it seems that it’s not working when you have a
    ul li a

    is that correct ?

  12. Ben says:

    I cannot get this to work. Here is what I have done.
    1. Downloaded border-radius.htc to the css folder
    2. In my css file I added this to the div that I want to have rounded corners.
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(‘css/border-radius.htc’);

  13. adnan says:

    so we cant give border on desire side in ie?

    i m trying to give but it works on all side in ie while working well in firefox

  14. [...] do IE não aceita essa nova propriedade do CSS, podem ficar tranquilos agora, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver [...]

  15. [...] 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 [...]

  16. Stefano Guglielmi says:

    this script s***! doesn t work on IE

    • dan says:

      try setting the url of the border-radius.htc relative from the html document, not the css file that sets the behaviour parameter.

      I have my css and border-radius.htc in folder called css, the html documents are in root. But in ie.css (which contains the behaviour parameter, and is in folder css) I put: behavior:url(‘css/border-radius.htc’).

      Works for me. But there are lots of problems if you have dynamic content that changes the size of elements without a page refresh.

  17. Hamid says:

    There is a problem when im trying to put a container div with a background!

  18. [...] uygulayabilirsiniz. Eğer bu beni kesmedi tüm browser’lara uygulamam gerekiyor derseniz şu linkteki ve şu linkteki makalelere bir [...]

  19. [...] Para saber mais sobre a solução do arquivo .htc para o internet explorer, acesse: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser [...]

  20. Nakul says:

    Its work in mozilla but not work in ie6,7,8 plz help

Leave a Reply


+ 2 = three

Subscribe via email

I’m promoting

Yellow Pages
Advertise here