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
410 Responses to “Curved corner (border-radius) cross browser”
Leave a Reply
Thanks,
amazing dud.
Seems to not work if in a container with a background-color.
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 ?
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’);
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
this script s***! doesn t work on IE
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.
There is a problem when im trying to put a container div with a background!
I’ve the same problem!
Its work in mozilla but not work in ie6,7,8 plz help
It only works in IE if the four corners are rounded.
hi guys
i am giving curve on left side and left side bottom. its work in firefox but it is not working in ie
can you guys help me how it can work?
thanks
Thanks, this works great on my site.