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 🙂
I have implemented this plugin and it seems that it doesn’t work in some versions of IE6. Check: http://spoon.net/browsers/
Really neat, but also extremely buggy. About 60% of my round-cornered blocks go haywire in IE7. Success with only the simplest layout components. Wherever there is complexity of any sort, this method falls on its face. And the failures are not the slightest bit graceful. Many cause show-stopping failures in readability.
And yet I also now have very nice rounded corners on a few simple page elements.
Great work.
A year ago, I was able to implement this and have it work cross-browser including IE’s. However, lately I haven’t had any success. In IE, the element’s background is taken away mysteriously.
Awesome, rounded corners in IE. I’m using it on some buttons (anchor tags) but the background-color in the :hover is ignored. Any way to get that working? Other than that it’s great. Thanks!
Hi. I try this method but nothing. It doesn’t work. I download the file HTC and i create the file HTML with your description and the file CSS. But the round corner don’t appear in IE8. Only with Mozilla. What can I do?!
Pleare reply me
Hi , good job. But ı don’t download border-radius.htc. Because “404 not found” 🙂
can you correct link ?
Thank you out there – was exactly looking 4 that!
Best regards!
Hello
Thank you for the htc file, it works great.
It does not specify what license it is released under, and the comments are disabled, so I apologise if you have been asked this before.
Would it be possible to update the file or this website to reflect the license the htc file is under?
Thank you.
Hello
Thank you for the htc file, it works great.
It does not specify what license it is released under, and the comments are disabled, so I apologise if you have been asked this before.
Would it be possible to update the file or this website to reflect the license the htc file is under?
Thanks.
Very nice work on the .htc but I’ve got a problem on http://www.bq.org.au/site.php where it’s working on #content (with the white background) but for the main navigation dropdown menus, it’s killing off the borders completely. You can see where the borders and corners should be in either FF or Webkit.
This is amazing. Thank you.
Your last version (2009-Nov-18) is not in fact cross-browser: doesn’t work on IE8 or IE6 (I bypassed IE7)!!
If you find some time to send me some hints about how to put it running on IE, I will appreciate…
Links are broken. Can you update?
I am using Win7 64bit and uploaded the htc file to my hosting server in the hopes to get rounded corners in IE 6, 7, or 8 on a new Drupal theme I am working on. However unlike the -moz or -web kit, this htc file doesn’t work very well dynamically. That is to say, if I open a page, it looks fine, but the moment I resize the page, the div stays the same size unless the page is refreshed at the new size.
Also with -moz and -web you can choose which corners you want rounded, does this have that option? I didn’t see any documentation that would lead me to believe so… currently when using this, ALL corners get rounded and I would like to have only 2 rounded. Can this be accomplished?
Thanks
William
SoCalCreations.net
Meu parabens! gostei muito.
só faltou o suporte para:
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
😀
Hello rahnas…iam friend of jabir… Hey i tried the css round thing but its not working in IE8….any soln..? 🙁