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
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
449 Responses to “Curved corner (border-radius) cross browser”
Leave a Reply
you rules¡¡¡-…from Chile
Hi, I would like to know if this works on all IEs? cuz your example doesn’t show on mine…the supposed to be rounded box is not. thanks!
Thanks great script!
To eliminate borders stroked=”False” in the roundrect.
I am trying to fix the joomla layout by including this type of box. Can anybody help me
There are many simple and javascript enabled complex examples to build rounded box. But the best is which are exandable freely and not of fixed with.. Regards Bikram
Firefox 2.0.0.17 chokes on the image bit, it does draw the curver border i’ts not wide enough to cover the entire edge of the image.
My I7 complains when trying to set arcSize, heres the watch on ‘this’
this
{…}
defaults: Access is denied.
document: {object}
element: {object}
Also without any JS stuff is a bit misleading
yes it works very nice
Thanks for the script.
Works perfect… or almost.
For some reason, it also removes some styles within divs.
See, for instance, the tag cloud in
http://ictlogy.net/bibciter
Now deactivated for IE, but, if activated, the tag cloud becomes a normal bullet list. Weird.
Hum… it seem to work on ie7… is that normal? what about google chrome? I’ll try getting some spare time to play with it.
Looks great on firefox though!
Good job
Rly all browsers? wat about firefox2? icab? konqueror?
@Salco I will when it’s done and cleaned
@ Martin
So you’r gonna make it work well.
Why dont you drop your version of htc here?
Awesome script Remiz
@abecadlo normal for Opera it does not support htc behaviors. your IE6 must be a standalone version.
@Paul Gonella: normal: there is a stroke. Apparently it cannot be removed.
I’ve tweaked the htc so that the stroke has the same color as the background-color
l.30 strokecolor=”‘ + fillColor + ‘”
and I’ve adapted my version so that the width and height are always the same as the elements the script applies to:
var w=this.offsetWidth,h=this.offsetHeight;
width: ‘+(w-2)+’px; height:’+(h-2)+’px; antialias: true; in the roundrect
it doesn’t work with Opera 8.21 and IE 6 on Win XP …
For some reason if I have no border set in my CSS in IE7 the curved corner DIV has a black border that I can’t remove.
Any ideas?
Fresh concept!
Needs some work to avoid text in the curved part of the div (border)
Keep up the good work
There are some problems with this script when using floats, it will tamper with margins and therefor layouts will be wacked
Ok, iam back here i checked on Browsercam with XP SP2 and it worked Fine!
Great!
Great idea with that htc File! But somehow it doesnt work in Multiple IE6. Iam going to test it on a real XP SP2 IE6 install later on.
hmm.. Good try, this is interesting, also this can reduce a lot of codes in the page…
Keep exploring. all d best