Curved corner (border-radius) cross browser

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

    Hi this is great. I’m just wondering that this doesn’t work if the div set to relative position. Any work around?

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

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

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

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

  6. Alice says:

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

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

  8. Furqan says:

    Thanks,
    amazing dud.

  9. Greg says:

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

  10. Patric says:

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

    http://css3pie.com/

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

  15. Hamid says:

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

  1. July 14, 2010

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

  2. July 15, 2010

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

  3. July 22, 2010

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

  4. July 25, 2010

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

  5. July 27, 2010

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

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