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 🙂
Been playing with this and it works well except for one bad flaw: you can’t put your button into a div which itself has a background image or colour. The code sets the new rectangle object’s z-index to -1, which means it ends up hidden behind the background. If I frig the HTC file to set the z-index to zero, the rectangle appears in front of both the background and the text of my button. Sigh…
Sorry, the doctypes didn’t show I have excluded the tag markers to see if they display:
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
it worked ok in IE8- but div width/height issue remained.
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
Then the input boxes all disappeared but the divs displayed correctly!
Roger
Sorry for some reason th
Very nice solution to problem. Works well in all browsers I have tried it in (IE6 and8, FF, Opera and Chrome).
Very impressed that it worked so well “straight out of the box”
One issue is that I have used it to produce rounded corners on an input form. I was surprised to see it worked in IE – for some reason I was sure it wouldn’t.
However I then tried to get-over the well known IE div width problem by changing the first (doctype) lines of the page.
if I had it as:
It worked ok in IE8- but div width/height issue remained.
If I had it as:
Then the input boxes all disappeared but the divs displayed correctly!
Any ideas?
Thanks
Hi, it do not work for input and fieldset tags!
But this script is great and will be better if work for these tag too.
@Daniel – I was able to get the rounded corners to work with transparency in IE 6, 7 & 8. Create a special IE stylesheet and use these styles (change the “85” to match the opacity you have set for opacity/moz-opacity/webkit-opacity).
* {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=85)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
}
html {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
position:relative;
}
div.roundedCorner {
behavior: url(/new/css/border-radius.htc);
}
Hi.
I was able to get this to work beautifully on all browsers, but I have one issue.
In IE it repeats the background-image both vertically and horizontally. It does not allow the image to repeat just horizontally.
Any ideas to make this work?
For me it is working fine for background color, by using only one tip
you need to put the complete address in behavior property
for example if your .htc file is located in root folder and your site’s name is mysite.com
you should add
behavior: url(www.mysite.com/border-radius.htc);
you do not need
position: relative; or zoom: 1; or z-index: 1;
only add
border-radius: 20px;
I have checked in both IE 7 and IE 8
check light blue background here and please report if you found any problem
http://arash.jp/test/
I finally was able to make this thing work!
It does work in IE too. All versions.
But you know what? I realized you didn’t explain detailed how to install the htc file and more about the styling. (At least not, for newbies on this, like me).
If other people is encountering this problem, you should check out this other article I found on the net, that explains further:
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers/comment-page-2#comment-2398
Together with your article, you’ll successfully have rounded corners in IE all versions =)
nice solution
i like it.
Thankssssssssssssssssssssssssssssss!!!!!!!!!!!!!!!!!!!!!!!
Hello,
I tried this. My site already have so many ‘s. When I used this I think my base came to the very top. Now no other thing is visible! But in firefox all things are normal.. I don’t know why.. Can someone help me..???
Thanx..
The corner radius issue of IE gonna solve.
http://kbala.com/ie-9-supports-corner-radius/
in IE it doesn’t work with transparent backgrounds and doesn’t support background-position and background-repeat for image backgrounds.
also, it creates some new DOM elements outside the original element’s container, so it throws off any DHTML you might have (tab navigation in my case).
Here is the solution.
http://kbala.com/
not working at all for IE 6;7;8
On the page “test” I am using two containers side by side. In Firefox all is well, but in IE8 the box background colour changes to black from white. Please advise! Thanks. Note: This is an Exponent CMS based test site.
hi there,
It seems your instructions for “Update 10 June, 2009: Some servers need to set MIME type for HTC to work this in IE6.” only covers Apache.
How about nginx?
Excellent! I love this. It works fine in IE, Mozilla, Chrome
Extremely limited solution for IE and a time waster!