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 🙂
Sorry, but this doesn’t work for in IE 🙁
Great work!
Unfortunately, been having the previously mentioned issue of having the element disappear in IE6/7. It appears to be the use of either “border” or “position: relative”. IE8 has refused to work so far. Though all IE versions display the sample html that was packaged.
@Denise : Make sure server mime-type is set correct. Are you having problem accessing locally or hosted on a server?
Don’t you provide a facility to set each border radius separately?
For ex-l FF supports: -moz-border-radius: 6px 0 0 6px; // top-left 6px, bottom-left 6px
How can I jusr round the lop left corner in IE?
-moz-border-radius-topleft: 10px; /* works */
-webkit-border-top-left-radius: 10px; /* works */
Not working for IE:
border-top-left-radius: 10px;
Any ideas?
Martin
Nice, any chance of getting the -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright to work too?
OK, found a solution (seems to work at the moment).
http://modxcms.com/forums/index.php?topic=43229.0
Apply…
position:relative; z-index:0;
…to the containing element that wraps the element you want to have rounded corners.
I have the same problem as David Karlin.
If you have a background color set on the containing element (e.g. I have a div wrapping the div I want to have a rounded corners, and that containing div has a background color which breaks this supposed solution).
Anyone found a work-around to the background color issue?
Only partially working.
If i use the IE8 version of the file (border-radius-ie8.htc) it works in ie8. But the all browser version file (border-radius.htc) does not curve the corners and makes the background and border disappear.
Looks like i’m not the first with this problem. Any solutions?
a-ha! If I edit the line:
rect.style.zIndex = el_zindex – 1;
and change to:
rect.style.zIndex = el_zindex – 10;
Success! Thanks for your work.
Worked nicely but… While my corners are now round, the content within the box is hidden behind the box. So close…
I love it! Unfortunately it doesn’t work too well with the Thesis 1.7, Full-width framework. It did curve the corners, but it also rendered certain commands inactive, such as “background-repeat:no-repeat” or, “background-color:#FFFFFF:”. I applied to the header (with a logo on it), and it made the image repeat itself, and the background color disappeared, it became transparent. But I’ll try this on a page-width framework. 🙂
but it doesn’t really work, one time yes one time no
who can trust IE ?
Hi There,
Great little file, although can anyone enlighten me on whether the htc can be adapted to support a border around an image tag without having to wrap it in another div?
Thanks, Dan.
thanks, it works fine on the table border. But when i do the same for a table data tag it turns black??
anyone know why??
The .htc file completely messes the page up in IE when not using the ‘all-corner’ ‘border-radius’ definition, but only e.g. ‘border-radius-topleft’ or ‘border-radius-bottomright’, which is in fact valid css3..