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 🙂
radius corners work but it turns the whole div black.
any thoughts?
I see black areas in IE8, didn’t think this was the cause…. It’s not showing in FF, Chrome, Safari, and Opera. If I reload the page three or four times it’ll go away. I’ve spent a week on it, tearing everything apart, but can’t seem to figure what causes it. At first I thought it was jQuery, but I removed the jQuery and it’s still breaks. Jacob, is your problem in IE?
Issue in IE-8
==============
Content falling out of curved div. As height of curved div is calculating using .htc file. its calculating shorter height of curved div.
any idea?
Hi guys! i have a little problem here. I am using this border-radius.htc but it seems it is not working. I followed the instruction and yet nothing is working fine. it works for all corners of the div but my main problem is that I am only making the upper-left and right part of the div round. How do i do it? I badly need to solve it asap.
Thanks in advance!
Cheers!
Not working in IE 8. 🙁
You should also not forget that any thing with border-radius.htc you should put position: relative.unless there is already a position.
and for best result use same border radius to all corners.
and never use border-radius.htc with another IE hack.
radius link: http://t.co/boiWGbk
found that its not working in IE8 during the transperance applyed to the object what trying to corner. Once transperancy take it out, the rounded corners works perfectly.
Thanks very much, works perfect!
Arggg… now there an error: Access Denied (IE 8)… and does not work. ¬¬
Working for me… follow the tips Felipe de Castro that it will work:
*{behavior:url(border-radius.htc)}
.border_1{border-radius:10px}
.border_2{border-radius:5px}
Hello,
This does not seem to work with following syntax
border-radius: 15px 15px 0 0;
where each value describes a corner.
It does not work with extended property names such as border-top-left-radius.
Is there any workaround ?
Thanks,
David
it’s not working for ie8
same in here, not working with ie8
Sorry but this is not cross-browser. IE won’t show curve corners.
Do i have to write “behavior:url(border-radius.htc)” in every single class that i want border radius or can i declare it only once?
for example:
*{behavior:url(border-radius.htc)}
.border_1{border-radius:10px}
.border_2{border-radius:5px}
thanks.
I’m having a problem with IE6-8..
how to get curved corners css without problem in ie browsers…
i need css code for ie6-8…..
I’m having a problem with IE6-8..
With the HTC file(behavior) I get curved corners but the content of the element disappears and the elements functions(onclick etc..) doesn’t work..
I had the same problem. There is a lot of javascript in the page (it’s a timeline) but each element I target with the htc radius, the background disappears. I’ve used it fine elsewhere. It seems to conflict with other script.
Trying to use it with Dreamweaver on an html page and no joy. Have tried removing float.
Dreamweaver shows in it’s preview pane what would show in Internet explorer, being the most popular default browser world wide. -moz and -webkit styles only affect firefox, opera, and safari (as far as I know) that’s why dreamweaver doesn’t show the rounded corners. If you run the website in firefox though, it works perfectly
At first mine didn’t work, but I made sure the file was placed in the home directory and NOT in any other files, then it suddenly worked.
can we use without image?