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 🙂
Hi everybody,
good work !
in my case i have problems to get them work in IE (what else), there is no background color.
in IE6 perfect.
in IE 7/8 i have to set the z-index to 0, then every thing is fine.
in IE9 there is no background-color, only a border around…the curves are rounded.
maybe some one got the solution?
Thanks
The CSS at the top of the page is incorrect. It won’t work unless you add: border-radius:10px;
If you download the example, it works because they included border-radius.
-moz-border-radius and -webkit-border-radius get zapped by IE.
Sorry!!! this is not working in IE8. any clue?
hi, this does not seem to work at all in IE, does not show the border, background image, at all with the code inserted. at least before it showed the box squared off.
please view my source here: http://stardustpastry.com/new
i tried:
behavior:url(border-radius.htc);
border-radius:15px; /* regular */
and
behavior:url(‘border-radius.htc’); (with single quote)
border-radius:15px; /* regular */
any ideas?
im testing it at https://browserlab.adobe.com
-moz-border-radius: 15px 0 0 15px;
-webkit-border-radius: 15px 0 0 15px;
border-radius: 15px 0 0 15px;
behavior: url(border-radius.htc);\
Code above give perfect rounded corner even if i have give 0 to top right,bottom right on linux server;
can any one tell what is wrong in my code
Thank you for this one. I’ve been looking around a bit at Nifty, and Spiffy, and no-images, and javascript-only, and CSS-only (and I even read a discussion where the programmer was dissing Spiffy, even though it was a beautiful anti-aliased CSS-only hack, for daring to using empty markup [non-semantic]; geeze, forget the critical fact that we’re not having to generate silly pieces of image files and having to set them just right – which a nonsense hack – and not loading and running DOM javascript that eats up CPU – which may be interesting but why eat CPU when you don’t need to – we’re supposed to moan about a beautiful solution because it uses a little HTML markup with no content in conjunction with CSS to give you exactly the effect you want).
But yours is what I’m going to use (clean, straight CSS for everybody except IE; and the “htc” for IE only). Thanks again.
Hi unfortunately this isn’t working for me on Internet Explorer 8. Infact even your demo file is not displayed with rounded corners in my browser!! Please help!
I fixed a bug when the script get background image:
origin:
var fill = document.createElement(‘v:fill’);
fill.color = fillColor;
fill.src = fillSrc;
fill.type = ’tile’;
monyer modify:
var fill = document.createElement(‘v:fill’);
fill.color = fillColor;
//monyer modify
if(fillSrc != “none”) fill.src = fillSrc;
fill.type = ’tile’;
download it from google code bro…! 😀
I’m using an implementation of this script shown on this page:
http://fetchak.com/ie-css3/
I’m rounding corners of boxes that form the background of heading titles. in other words the text is in white and the boxes sit behind them.
There is an unfortunate issue on IE 7 and 8 whereby theses boxes will slide around if the window is resized.
does anyone know why this would be the case:
a demonstration of this issue will be available here for a short time.
http://staging.community.bda.org/
any help would be most appreciated.
I’m using an implementation of this script shown on this page:
I’m rounding corners of boxes that form the background of heading titles. in other words the text is in white and the boxes sit behind them.
There is an unfortunate issue on IE 7 and 8 whereby theses boxes will slide around if the window is resized.
does anyone know why this would be the case:
a demonstration of this issue will be available here for a short time.
http://staging.community.bda.org/
any help would be most appreciated.
Hi!
Will this work for individual corners, or only for all 4 corners with the same radius?
I’m asking because two other htc scripts I’ve tried had this limitation.
Thanks,
Lukas
Hey Lukas,
I’m creating 5 different rounded corners with different CLASS / ID which all works currently I couldn’t provide a demonstration link but as soon as my theme get competed I will update the link here for the references.
.rc3{
-moz-border-radius:3px; /* Firefox */
-webkit-border-radius:3px; /* Safari and chrome */
-khtml-border-radius:3px; /* Linux browsers */
border-radius:3px; /* CSS3 */
behavior:url(border-radius.htc); /* IE */
}
.rc5{
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari and chrome */
-khtml-border-radius:5px; /* Linux browsers */
border-radius:5px; /* CSS3 */
behavior:url(border-radius.htc); /* IE */
}
.rc10{
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc); /* IE */
}
.rc15{
-moz-border-radius:15px; /* Firefox */
-webkit-border-radius:15px; /* Safari and chrome */
-khtml-border-radius:15px; /* Linux browsers */
border-radius:15px; /* CSS3 */
behavior:url(border-radius.htc); /* IE */
}
.rc20{
-moz-border-radius:20px; /* Firefox */
-webkit-border-radius:20px; /* Safari and chrome */
-khtml-border-radius:20px; /* Linux browsers */
border-radius:20px; /* CSS3 */
behavior:url(border-radius.htc); /* IE */
}
.rc25{
-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Safari and chrome */
-khtml-border-radius:25px; /* Linux browsers */
border-radius:25px; /* CSS3 */
behavior:url(border-radius.htc); /* IE */
}
could you show your html code, please? i didn’t understand what do you assign classes to. i’m not good in English and in coding, but i need buttons with diferent corner radius. help me, please:)
god help u! hah. Thanks alot.
Saved me the pain of creating rounded corner images
For some reason, I cannot get this to work in IE. I had a combination of static and dynamic elements with rounded corners and was getting errors(the “display:none” elements had no offset width or height so border-radius crapped out), so I disabled the dynamic ones, but the static ones still do not display. I applied the behavior inside a conditional stylesheet:
.roundedCornersIE {
behavior:url(/creditscores/border-radius.htc);
}
which, according to firebug lite, is being seen twice, though it’s only called once. It’s first entry in the script list doesn’t seem to be active (I can’t put a break in it). I put a debug break in the second entry’s oncontentready, but it doesn’t seem to execute.
Any ideas?
hi bruce, i was looking at your code, and noticed that your missing your single quotes in the parenthesis,
behavior:url(/creditscores/border-radius.htc);
should be, behavior:url(‘creditscores/border-radius.htc’);
and the forward slash before creditscores should be removed.
provided your path would be /www/creditscores/border-radius.htc
but I don’t think the single quote will make any difference I used it without quote and its just working fine with all browsers.
For some reason, I cannot get this to work in IE. I had a combination of static and dynamic elements with rounded corners and was getting errors(the “display:none” elements had no offset width or height so border-radius crapped out), so I disabled the dynamic ones, but the static ones still do not display. I applied the behavior inside a conditional stylesheet:
.roundedCornersIE {
behavior:url(/creditscores/border-radius.htc);
}
which