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 🙂
Thanx for this…
Hi,
I had used this technique previously on a client’s site and it worked.But now i am trying to use it on another site and it cant seem to work.The First site that’s working url is http://www.kifaruadventuresafaris.com/
while the one that’s not is http://79.170.44.148/savagewildernesssafaris.com/index.php
Here i want the drop down menu to have that rounded effect.
Please help.Could it be because i’m using that SWmenupro Component?
Nice safari websites. Hopefully we can get our rounded corners problems worked out. It is working on some elements for me but not others.
This script doesn’t seem to work if you include a different background color than white in the body.
Working pretty good but currently it is not applying well to TH (table head) elements. Any suggestions?
Everytime I use this .htc for adding border-radius in IE, it fucks up the whole background images of the element, its child elements and its first parent-node. They just get transparent.
Me not like.
This really saved me. I was using curvyCorners and it broke both my ads and my iframe shoutbox without reason and was hardly cross-compatible, not to mention the slow javascript loading (compressed too).
Thank you so much! Works perfectly.
Internet Explorer is a Fucking bitch.
you are right internet explorer is big problem for HTMl users,
Thanks for this tutorial. I just created my own for my blog and I’m very happy with the results. It was easy to follow and get working. I think many can do this change with ease.
Hmm, is there a way to parametrize the border radius?
I used to own a web-site just like yours, but then I stopped doing it. Definitely keep up the good work, you’re a great author!! 😀
Put this line between your tags. Solves some problems..
I was been looking the Google for this data and i wanted to thank you for the post. By the way, just off topic, how can i find a copy of this theme? – Thank you
This script kinda sucks if you’d want to use this on a real site and support hovers and nesting.
hope you will keep improving this script!
too bad. it doesn’t work with IE shadow filter. http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
You can use this script to make rounded corner and dropshadow same time on same div
http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards
good. I’ll try in further projects. but for this one, I ended up using this one http://www.ruzee.com/blog/shadedborder
The new updated example doesn’t work in IE8.
…also if you alter content of the element after rounding it’s corners, auto-fit-contents will automatically fail… ( in IE )
IE requests “none”-named resources if CSS background-image is set to “none”… so apply following fit to that htc-file…
fill.src = fillSrc;// replace this line with following
if( fillSrc != “none” ) fill.src = fillSrc;// fixed… ie wont request none-files
not works in IE8 🙁
this value –> 10px 10px 0px 0px
not works in IE8