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 🙂
Hello, Looks terrific, if I would get it to work. All it does is remaking the box to a white box with no colors at all.
.roundbox-f3f3a5 {
border: 0px none;
background-color: #f3f3a5;
margin: 0 ; padding: 10px;
-o-border-radius: 15px;
-icab-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc);
}
is this CSS-code. I really cant find any problems with it there.
Best Regards
Daniel
Also, in addition to IE filling the space with black if there is no color specified (I’ve tried transparent), IE6 also seems to insist on stroking the div with a white outline, even though no border is specified. I’ve tried border: none, border-color: transparent, border-width: 0, etc. with no result.
Any help you could provide would be greatly appreciated.
Thanks.
It seems that you can’t leave the object without a fill, otherwise it gets filled with black.
Is there a way around this?
Thanks,
Brad
What do i do with the htc file?
Nice I found the download, sorry….it’s great ! 🙂
It looks interesting….but it would be more clear if the download were available.
Are you planning on putting it back?
I’m really interested on knowing how this is done :O Nice trick! thanks!
Hello,
I have downloaded your newest demo version of this, and upon previewing the html document in IE7, the borders were still square. Am I missing something?
Thanks for any information.
Jordan
I did what the tutorial says, but somehow it doesn’t work on other browser but firefox. Any idea?
Thanks A lot!! 🙂
I have tried your solution , but it is not working in IE6, your demo is working correctly but when I am using it into my code it is not working. Any suggestion?
awesome! can I get only top or bottom corners rounded?
Thanks for this great effort! keep it up.
can you help me,
your to cut the corner is very good i like it , but have one problem i don’t want the border , how can i do , it display not good when background under the image cute is mix color , so i want when the pic is finish cute ,it don’t see the border ,
regard
Hi, is it possible to have different corner radius sizes and define top left, top right, bottom left and bottom right. I took a look at v:roundrect documentation but found nothing… I need it so bad… And I think your implementation is great, is the cleaner of all I have seen so far. Thanks.
might want to post a quick note that the border size must be specified in px, as usage of the general thin and thick prevent proper operation.
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 🙂
—-
UH.. Work fine in Firefox, but not work in Internet Explorer…
The reason is = INTERNET EXPLORER SUCK!
Hi,
Have tried using your htc but on my home PC when I access the page I get MS Office installer coming up. I’m guessing this may be to do with whether I have VML working on my machine. Is this something you’ve come across?
Can this work for say, input boxes and buttons (for IE)?
Hey, I got a new version of the script that supports box-shadow now. It’s pretty basic support, the shadow color is always black, but it does work. URL: http://fetchak.com/ie-css3/
Hope you don’t mind, I renamed the script on my site. It’s got your name and a link to this page though.
Thanks for getting this started :). I’m already putting it to use on a new site.