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 🙂
Remiz, i’m having trouble making your code work in IE6, in firefox it works admirably, but on IE it breaks the background on my divs making them black.
(simple 3 div page), hre’s the url: http://www.espiralcalipso.com.ar/pruebas.html
the code added is:
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
i suspect the problem is something the HTC does that changes the index or overrides something, i’ve also tried different radii values to no effect.
any ideas?
Hi,
Lets say that we only want to curve the top right corner,
is this possible with the htc file?
Thanks
@Remiz I’m willing to fund this so it’s done.. I fear IE 7 and 8 will be around for a while.. Get back to me plz…
Thanks, it works for me too in IE, but 1 question> as in example we use border-radius:value, and it makes all corners rounded but can use use it as border-radius-bottomleft or bottomright as we use in ff or safari -moz-border-radius-bottomleft or bottomright and -webkit-border-radius-bottomleft.
Thanks.
Not possible using current htc files. I need to digg more in to VML for this. But not in near future as I’m loaded with WebCastle projects. Might not be later also, as IE 9 supports border-radius.
Hi,
the htc file doesn’t work for Opera (even the latest versions)
Thank you
Tried it but didn’t work on my left and right side menu bars as they are links I guess.
Hi, i found a litle bug. If you apply behavior:url(border-radius.htc) on a link ( a tag) it don’t propagate hover event. So if a:hover element is also curved and has diferent color of the background or border it will not work. Do you know how to fix it?
Greetings
Bart
Its very useful, thanks
I think it would be better if it works with tags, as FF does because we use to use lot on menus
Thanks dude ! Its amazing it works for me with IE too..
Thanks for this, but it doesn’t appear to work for me in any version of IE running locally on Visual Studio. Background image or not.
Must I be online for it to work?
Is there a fix to make this work when the element has a background-image as well? Currently, it seems like this HTC script makes the element’s border and background transparent when it has one set.
@sam you can look here if you can find anything else that is clear…
http://code.google.com/p/svgweb/wiki/ChangingServerMIMEType
@Sebastien can you share what you did to fix the bk issues?
From reading the code I’d think the simple solution is to do and if no-repeat… take the width and height of it’s box and make an 64base to pass to the fill.. but may-be there is an easier way?
Hi jeremyBass, I have tested locally its working. But for live site except IE versions its working for all browsers….My website is hosted at Parallels Plesk..
Once again its me sam.. border-radius.htc works for me in all browsers but not working in IE(For all IE versions)…..And one more thing like in cpanel the process is clear for adding MIME files but how to add the MIME file in Parallels Plesk…Please help me..
Great technique, but a small problem with the .htc extension for my website. I have uploaded the .htc file in my server and after this the website stops working. It shows 500 Internal Server Error. The code works fine for me in local but not in the server. Can anyone help me…May be the problem is with .htaccess file. One thing i have .htaccess file uploaded in my web server.
the scrren shot
http://www.corbensproducts.com/IEtest.jpg
Alrighty 🙁 Kept testing..
It has the css as
/*—-eNL—-*/
.eNL-input,.eNL-button{margin:9px 0px 0px 2px;position:relative;}
.eNL-input{border:1px solid #999;font-size:12px;padding:0px 10px 0px;height:25px;line-height:25px;width:191px;color:#666666;font-weight:bold;}
.eNL-button{border:medium none;height:24px;width:83px;background: transparent url(uploads/AACCtheme/sign-upSprite.png) top right;cursor:pointer;width:1px important!;height:1px important!;}
.eNL h4{padding-right:10px;font-size:15px;}
.eNL p{padding-right:10px;font-size:11px;}
/*–BB section–*/
.BBsum{width:268px;color:#000;background:#FFF url(uploads/AACCtheme/BBl-inlineIcon.png) no-repeat 8px 22px;}
.BBsum .Sum {border-left:2px solid #EAEAEA;color:#333333;font-size:11px;height:100%;line-height:15px;margin-left:25px;padding:10px 5px;}
.BBsum .Sum a {color:#006699;}
but it’s just repeating the back ground regardless of the no-repeat…
I was so excited… This seemed like a great bullet proof solution…
Hope anyof this helps to get it working 100% as if IE was using CSS3
Cheers
expanding on the error.. I did this..
.portal{background:#eaeaea url(uploads/AACCtheme/headerShadow.png) repeat-x top right;height:462px;border-top: 1px solid #bebebe;border-bottom: 1px solid #FFF;z-index:9;}
.BBsum{
width:268px;
background-color:#FFF;
height:66px;
border: 1px solid #FFFFFF;
z-index:99;
color:#000;
}
adding the z-index:99; based off whatI was gathering from Sebastien’s post.. that pulled it forward.. I SEE THE BOX!!!
So all good ? no.. sadly not.. the text inside is gone..
so this is what the dev tool for IE8 shows in the dom after load…
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><v:roundrect style="Z-INDEX: 8; POSITION: absolute; WIDTH: 269px; DISPLAY: block; HEIGHT: 67px; TOP: 14px; LEFT: 9px; antialias: true" arcsize = "7710f" coordsize = "21600,21600" fillcolor = "white" stroked = "t" strokecolor = "white" strokeweight = ".75pt"><v:fill src = "none" type = "tile"></v:fill></v:roundrect>
:/ any idea on what to do..
tk Cheers
@Sebastien what was the fix.. I think that is the same issue I’m having.. TK cheers