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:
- .curved {
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- behavior:url(border-radius.htc);
- }
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 🙂
don’t work inside of another div
I was having trouble with this script in IE8, so I basically rewrote it. This new version works in IE6, IE7, and IE8 in all modes, and also displays the VML box behind the original elements to avoid messing with site layout.
Just checked this in ie7 before implementing it in my file – it doesn’t work 🙁 All the divs are square. Same in ie6 and in ie8.
Any advice?
Thanks for this code.
I get an active-x warning. Will everyone get an active-x warning? How can I turn that off?
How does the .htc file know what the border-radius’ are?
Thanks.
Not working on IE 6, 🙁
please help
I’m working with a front end engineer who’d like to use your technique, but we’re running on a cloud-oriented host who has us running on nginx vs apache and so I dont think there’s any way we can use this… am I right or is there a way to do that?
Remiz Rahnas,
Its working for tag only in internet explorer 7, Its not worling for items and also tags, But its working for in mozilla.
Please create a .HTC file with all broswers support ( like i.e 6 ot i.8 & mozilla also)
Raj.
i feel like ive found holly grall
thanks man!
Hi Remiz – am I correct in assuming that this only works in IE for elements which have explicit width and height set?
@Mark : As for now, you need to have fixed width. Because in IE, it is creating a VML element.
can anybody write in detail how to use this hack with wordpress… I m unable to make it work in wordpress
@Tushar : It doesn’t matter whether you are using in wordpress or anywhere. Just need those lines of CSS.
Make sure that you have the correct path of htc in ur css and set proper mimetype configuration on server
Hi, first of all, thank you for this great solution!!!
I’m using it for divs with colored borders. In my document I’m attaching different css style sheets using javascript to change color styles of divs and other elements on the page. Problem is on IE when using the .htc file javascript won’t change the class on the rounded div. Reading the code in the .htc file I’ve noticed that the script attaches the key ‘v08vnSVo78t4JfjH’ to the name of the class and I’m suspicious about this being the cause for not responding to the class change script.
Any ideas??
thanks!
Hmm, the solution seems to break in IE8. Anyone else?
Just to clarify Marin’s instruction, you need to replace
strokecolor=”‘ + strokeColor + ‘”
with
strokecolor=”‘ + fillColor + ‘”
It’s in that last major line of code (line 29 for me)
Some limits for the curved div found in IE 6:
1# have to explicitly set background color, with and height property
2# the top and left border do not hidden thoroughly when they set as !important. fix:
this.style.border=’none’; to
this.style.cssText=’border:none!important’;
3# why do you set the stroked=”false” ?
It sounds like some have found IE solutions, but I find when using the latest border-radius file that I get perfect rounded corners in all browsers. But in IE7 and 8 the rest of the layout more or less breaks. When applying to a wrapper div for my page content, in IE the container almost bleads off the right side of the screen and the text does bleed off the right side.
Has anyone else experienced a similar issue? And has anyone else gotten this to work well in IE7 and IE8. It’s a great concept but it needs to work in those browsers if it’s to be truly useful.
urrgent please
@Sreeni : Did you download the htc file and added correct path on css ?
this excelence code for curved corner and well working in firefox and safari.
but it is not in ie.
can please post the latest code working for ie as well, it is so important for me as i have product release
thanks in advance
Sreeni
Is doesn’t work here in any of IEs (6, 7 and 8). Probably because the need to set width and height for the .curved element, am I correct? Can you explain the use of this tip without the need of set up the width and height for an element?
Has anybody gotten this to work with WordPress? Also, what about the issue of this only working w/o a DocType for IE8?
*With inputs