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 🙂
Diz, Thanks for trying. Great site BTW. Unfortunately, that fix didn’t work for me. Border radius still does not work on :hover within IE. For instance:
#nav a:hover {
background: #7c2603;
border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(border-radius.htc);
}
Seems like the IE workaround is not working.
behavior: url(border-radius.htc);
When I post that in the appropriate div, which has -moz, -webkit, and regular border-radius attributes, IE gives me a script error when I try to load the page.
Has anyone encountered a .htc path problem with the IE family in Expression Engine?
The test files all work perfectly, but EE does not seem to be finding it.
i’m also face the problem, below code is work in firefox and not work in ie
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
can’t also i have tried to use like
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
any comment is appreciate…
I have just started using curved corners while I am learning web dev and it seems awesome Remiz.
I have come across something that I need a little bit of help with if people have got the time ; )
I am using swfobject to display my flash content. My alternate content which uses curved corners is also displaying. The alternate content should only show when the user has not got the flash player plug in.
Its only showing the curved corners and not the xhtml content but that’s aside the point – I just want my swf to show : (. This only happens in IE : (
Can anyone help with this pleaaaaaase.
@bestxp
if you want the bottom 2 corners to have a radius, then use this instead:
border-radius:0 0 5px 5px;
this will leave the top 2 corners the same.
I had the same issue as elquick with the divs disappearing. I had to give the div behind the divs that I applied the script to the following css “position: relative; z-index 0”. This worked for me.
Sorry for my english….
the htc file doesn’t work for me, when I try it, the elements that are using behavior disappear :S
so far, I have tried your demo with ie6 and ie7 in virtualbox (I am an ubuntu user 🙂 )
Could you help me?
Regards.
border-radius-bottomright: 5px;
border-radius-bottomleft: 5px;
don’t work
and border-radius: 5px; – work
=(
It’s not complete comfortable in ie 6 so what i do tell me ???
Living on Dividends says:
April 15, 2010 at 1:20 am
One downside I noticed, :hover doesn’t work. But this works in all other cases.
You can add to the end of the “oncontentready(classID)” function
the following lines:
var _this = this;
this.onmouseover = function() {
fill.color = this.currentStyle[‘-hover-bg-color’];
};
this.onmouseleave = function() {
fill.color = this.currentStyle[‘-normal-bg-color’];
};
and set to the CSS
styles like below:
-hover-bg-color: #00aeeb;
-normal-bg-color: #fff;
Hope this will be useful for temp solution
Best Regargs,
Ilya Grishkevich
It’s Not working in IE7
Dude, YOU ARE THE MAN! Thanks so much.
One downside I noticed, :hover doesn’t work. But this works in all other cases.
Would you know how to make this work for :hover too?
(Ex: nav menus using :hover as a different background-color with rounded corner.)
Hi, is there any chance, that the .htc learns to curve single corners?
Hi, great bit of script, IE is no longer all square!
However, there does seem to be a problem with the border colour. It appears much lighter than in Chrome or FF, and the table the border is around appears to have a light grey background. It’s no biggie, as it looks ok with a 0px border, but just thought I mention it FYI. Will be playing about with it myself to try and sort this.
Using IE8 in XP, if that makes any difference
Hi its an interesting solution… However, the inclusion of the behaviour attribute collapses the background’s repeat property…
irrespective of specifying no-repeat or repeat-x or repeat-y, the background image repeats in both directions, when the befaviour is pointed to the HTC file…
With this fixed, it could well be the universal solution till the browsers uniformly implement CSS3…
Thanx Alot, I really needed this.