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 🙂
Thnx alot… Keep exploring…… Being gr8 job….. 🙂
Doesn’t work for me.
Hi,
This script works perfekt…
but i would like only to have two rounded corners like this in firefox:
-moz-border-radius: 10px 10px 0px 0px;
Is there any way i can make this happen with this script?
hello there
something is wrong…
in html files its fine, but in php the damn IE just dont read the htc…
anyone can help me?
and sorry for my poor english…
I’m trying to make nested rounded corner blocks in IEs, but it does not seem to work. Does anybody have the solution?
Hi,
the demo file provided for download doesn’t work with IE 7 XP SP3!
What’s wrong? You can’t really call that cross-browser support, can you?
Hey its not working with IE7.. VS 2005.. Windows XP SP2
but its working well with mozilla..
So is there any technique, that i can use this in IE 7 also??
curved div is working in I.E 7.0 but i m getting a probelm.
div is showing black border. i don;t know how to remove this border..
will someone help me to remove this border..
Waiting for reply
Mudasser
I too am finding nested curved div’s are a problem in IE. Firefox is fine and I assume other non IE browesers are too.
A single (non-nested) curved div works fine but nested curved div’s do not appear at all.
This seems to be a restriction with VML.
Does anyone know a way, or if it’s even possible to have nested VML shapes?
Also fails if you have a curved div inside another curved div.
I added this:
Curvd div
asdf
to the example and the inner div shows up as all black.
FF/Chrome/Safari all show properly.
I am not seeing the curves in IE6 and IE7 for running the demo http://www.htmlremix.com/files/20080924-border-radius.zip?
i was searching for this one mate… thanks alot
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
Not Applied in IE
only Applied this -moz-border-radius:10px;.
Hi! I was trying to find a nice & simple solution to do some rounded-corners. Your solution helped me alote !
Thank’s !
Hi!
I´ve tried this bloggpost with XPsp2 – IE7 and Vista IE7 and IE8, none showing rounded corners for your blogg. (I know it should beacuse I´m using mac with safari otherwise)
Does anyone have an explanation to why it doesnt work – apparantly it works for several people here. (Would be nice to use this great idea)
It doesn’t seem to work with IE8…
Great post!!!
However, there are some problems which I personally encounter while using the code.
1. The script fails if being used on a table inside another table which is using the same script.
2. I wanted to send emails using this .htc file, but unable to create the table corners rounded.
Thanks!!!
How can I get this to work with absolute positioned elements? Thanks in advance…
Not a good solution if it’s not valid and it requires a htc file. Behavior property isn’t valid either. Great idea, but just doesn’t cut it.