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

    This solution does not seem to work if the parent/containing element is block or inline-block with a background-color set. any ideas?

  2. Bojan says:

    I IE it works only if you have code like this:

    some text
    or

    some text

    but if you put your div with rounded corners inside other div with id or class it stops working.
    like this:

    some text

    Does anybody knows how to solve this problem???

    thanks
    Bojan

  3. Arturro says:

    Hi there,

    I have something like this in my css:

    #container {background:url(../image/container-bg.jpg) repeat-x bottom;

    and the .box1 is in the #container like this

    this should have radius

    funny thing is that when the CSS line looks like this:

    #container {}
    then the radius is working…

    anybody knows what is going on ?

  4. Vincent says:

    It might be good to know that in order for this to work with a WordPress theme you have to supply the full path, example:

    behavior: url(/wordpress/wp-content/themes/mytheme/border-radius.htc);

  5. gjans says:

    Well the latest demo just doesn’t work for me. Is there some server requirements? I for example have this ERP system, that acts like a webserver and offers the needed CMS features in a GUI. What i was trying to say is that a PHP code for example won’t work on it. Only client-side Languages work. And it looks like this solution works with some specific server-side stuff.

  6. HTD says:

    Well, with my layout it just doesn’t work. I’ve double checked if .htc is loaded. It is, but still no joy. Does it really read CSS? Maybe HTML should be different than normal? Well, mine uses lots of “position: absolute” (even fixed) and z-index magic. I tried 3 different border-radius scripts for IE8, none of them worked with my layout. Well – I guess the layout has to be braindead simple for this to work.

    • Jagminder says:

      Oh Thanx…Its really amazing. I was looking for this sort of css properties for a long time but unfortunately I couldn’t found it. It helped me a lot.

      I want to give u thanx again and again…I like it much more.

  7. Alan Evans says:

    We’ve recently launched rounded corners on our homepage using more traditional image method.

    I’d love to move to something like this though. Just been having a play now and it does work really well in all browsers if you have all 4 corners rounded. Unfortunetly it breaks in IE if you only want the bottom right corner rounded like we do.

    If that could be sorted out then this approach would be much better solution than our current one.

    Thanks for all yor work!

  8. sarada says:

    Thanks a lot. It worked really great for div tag.
    I am trying to apply this for dt tag but failed 🙁
    Is there a way around ?

  9. Martin says:

    I tried to get all corners except the right top corner rounded. it works in any browser except ie.

    border-radius:12px;
    border-top-right-radius:0px;
    -moz-border-radius:12px 0px 12px 12px;
    -webkit-border-radius:12px 0px 12px 12px;

    Any suggestions for solving this problem?

  10. Tom B says:

    There seems to be an issue with applying curves to the BODY element.

    Changing

    while ((typeof(el) != ‘unknown’) && (el.currentStyle.position != ‘relative’) && (el.tagName != ‘BODY’)) {
    el = el.parentElement;
    i++;
    if (i >= limit) { return(false); }
    }

    to

    while ((typeof(el) != ‘unknown’) && (el.currentStyle.position != ‘relative’) && (el.tagName != ‘HTML’)) {
    el = el.parentElement;
    i++;
    if (i >= limit) { return(false); }
    }

    sort of fixes the issue, but any styling on the body (such as margins) is lost.

    Any ideas? Would it be better to replace the elements with a VML element rather than add an extra child and hide the original element?

  11. Balaguru says:

    Hi All,

    I am having a css menu in the site and it has a curved border. The border-radius.htc is not working for that menu. If I manage in a ordinary div part, the border curve radius is displaying.

  12. Lawrence says:

    Use this code to make only top coners round

    -moz-border-radius: 10px 10px 0px 0px;

    -webkit-border-radius: 10px 10px 0px 0px;

    behavior:url(border-radius.htc);

  13. Jay says:

    Hello,

    Love the concept and it worked great in practice. However, I’m trying to create a dynamic header on a website model and was wondering if you had a method for NOT curving the bottom but only the top L / R corners?

    Your thoughts…

    Jay
    CompuMatter

  14. Gungurru says:

    Many thanks to whoever made this – it’s really useful! I’ve yet to implement it into my main site, as there are still issues with IE users, and background images, but it’s been good on some projects which I’ve been doing!

  15. Wesley says:

    One thing that is bothering me is the ondocumentready. I have a couple of iframes and scripts on my site, for example the facebook like button. These units have nothing to do with my page layout but it seems that the script waits for these elements to finish loading before applying the rounded corners. This results in my page always taking up to a second or more before applying the rounded corners effect.

    This is the same in IE6/7/8. Is there anything I can do to combat this?

    • Thisdude says:

      You could remove the iframes, and replace them by div containers. When the DOM is ready and corners have been applied, you can append the iframe code to the innerhtml of the div using javascript.

  16. derrick says:

    the lastest file by Nick F is a lil screw up. It work if i download the demo file. It works perfect in IE7.

    After shifting the htc(to another location), and change the url address it doesnt work anymore. EVEN if i shift it back in the same folder as index.html it just doesnt works!

    My god, i thought this will solve my prombs… it jus prolong my suffering!

  17. mccbala says:

    Cool man.. Helped me right on time! Thanks a lot!

  1. August 5, 2010

    […] 발견: IE브라우저 적용, 에니메이션 효과 시 렌더링 오류가 있음… OTL Remiz씨가 쓴 내용을 바탕으로 fetchak 블로그에서 정리한 내용을 firejune님의 […]

  2. August 28, 2010

    […] solução foi desinvolvida pelos caras do http://www.htmlremix.com se trata de um arquivo .htc para resolver […]

  3. August 30, 2010

    […] qui permettait de rendre compatible les arrondies avec CSS3. Ce script a été développé par Remiz Rahnas et vous pouvez le télécharger ici […]

Talk your view

%d bloggers like this:
Read previous post:
Template fixed !

Finally , I got a nice simple template for this blog.  Hopefully,  I'll be posting from tommorow :) . I...

Close