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 🙂
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.
So this works wonderfully! One question – could you also include support for border-(top/bottom)-(right/left)-radius values in there? They don’t seem to work independently.
it doesn’t work for me.. i try in IE7, but nothing.. i trying in all the web exampless across the web.. used in my own server properly configured with mime types, checked the correct URL and doesn’t work.. any tip??
It doesn’t seem to work with background image attached to the element?
This is awesome, but I dont know it’s not working for me in IE8. Are known some issues? Thanks.
Amazing! Thank you!
Hard to make it work !!!
If you have a float bloc, you can’t use this behavior. So make a absolute positioned div and put your floats into. this is a ie bug !
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/#comments
Hi,
I also tried this, but it doesn’t work for me.
If you check my site, you wil see that IE doesn’t show my rounded corners right.
I now removed the htc file, and let IE be with no rounded corners. But I want IE to show them.
I think it doesn’t work if you put a div with rounded corners inside an other div?
Cause thats wat I have done.
anyone who knows what to do?
I like the layout of your blog and I’m going to do the same thing for mine. Do you have any tips? Please PM ME on yahoo @ AmandaLovesYou702
It does works on chrome, and firefox. But not on my IE8.
any chance this could be adapted to handle the following?
.sweep_fromLeftUp {
top: 185px;
left: 232px;
height: 15px;
width: 15px;
background: transparent;
border-top: 0px;
border-right: solid 120px lightblue;
border-bottom: solid 30px lightblue;
border-left: 0px;
border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-bottom-right-radius: 200px 60px;
-moz-border-radius-bottomright: 200px 60px;
-webkit-border-bottom-left-radius: 200px 60px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-right-radius: 0px;
behavior: url(/css/border-radius.htc);
}
hi thanks for the tip. but can i get this to work along with css gradients? in testing with ie on a button, with ie’s gradient code, it looked like the rounded button is underneath the rectangular gradient…how can i get the htc command to get the gradient properties and redraw them within the rounded button? thanks!
Sorry, if I’m being daft, but I’m using Drupal and am trying to figure out where to put the htc file in my site/root or theme’s folder?
Hi,
What about the “security protect” is IE? It is really disturbing.
Can it be avoided?
Thanks
Ciao
Hey can someone put together a complete cross-browser example of rounded corners and shadow. Also I don’t see how using the htc file gives any control over corner radius.
Please help. Thanks!
I tested this hack in FORM and it work well but don´t work in DIV´s menus
I’ll continue testing