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 🙂
i wish to know how the codes for curved border in css are linked in HTML document i wish hope the answers will be posted in my website as soon as this massage reaches you
It doesn’t work on my website, it doesn’t round the corners for anything and screws up all images on the site (turns them into black boxes) if you try to round the images as well. Was testing with IE8.
Your border-radius.htc doesn’t work with img 🙁
Its not working
I use ie-css3.htc in my css files.but it doesn’t work in IE8.why?
I have use .htc filt but not properly working on ie browsers different version.
Exm: IE8, IE7
we have using wordpress but rounded corner not supported in IE version
I am using this script in my page, getting error “Access is denied to:filepath/border-radius.htc'” Any suggestion!
how to make rounded corner work in IE7 with out .htc file and java script
Not working on any element of which parent element have a background image repeat-x or y.
The mentioned code to support css3 to all of the IE browser completely vogus. If any one do not believe please try.
If I set div to display:none so I can later do .show(), I get a javascript error (invalid argument) when the page loads.
I determined a fix for this, by setting opacity to zero for the first div (.rel). Then by invoking .show(), the curved corner box displays without setting opacity to 1:
opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */
If I set div to display:none so I can later do .show(), I get a javascript error (invalid argument) when the page loads.
Hello
I was adding this .htc to some of my projects, while implementing this facing one issue with background image ‘no-repeat’ or ‘repeat-x’ or y from css. Is there any way to stop this..
fill.src = fillSrc;
fill.type = ’tile’;
look forward
Sougata
Hi,
Where i should place the htc file. Please help me. Its urgent