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
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
410 Responses to “Curved corner (border-radius) cross browser”
Leave a Reply
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
look like the html didn’t make it..
<div class=’grid_6 portal gain’>
<div class="innerBlock">
<div class="BBsum curved8px">placeholder text</div>
</div>
</div><div class=’clear’> </div>
<div class="BBsum curved8px">placeholder text</div>
This is just a great start.. so when is full radius support expected? It’s nice to have the whole box done but top-left etc.. that is needed.
there still seems to be bugs in the IE8 part.. I have
placeholder text
placeholder text
and the one 2 nodes deep doesn’t render in IE8 but does in IE7.. the one on the outside does…
.BBsum{
width:200px;
background-color:#FFF;
height:66px;
border: 1px solid #FFFFFF;
}
.curved8px{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
behavior: url(border-radius.htc);
}
Any ideas? The xHTML is valid, it’s working in IE and I even made sure to force hasLayout and a border..
Super work.. Cheers
Hello!
I tried your fix because it’s the closest to what I’d like (with behavior, to avoid javascript calls). But I’ve been quite struggling with it.
.
The problem is that your putting a lower z-index to the VML element than to the parent, so… if the parent has a background, the VML is hidden behind.
I managed to make a solution. So I changed a bit the code… I’m sorry… I jQuerified it as it’s way much easier
If the admins are interested… or tell me where to send it to.
Oh, I would also note that your post here leaves out one important thing… for this to work in IE, you still need to include an explicit border-radius: 10px; otherwise, only the -moz and -webkit values will work and the rounded corners will only display in Gecko/Webkit browsers.