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 🙂
Hi this is great. I’m just wondering that this doesn’t work if the div set to relative position. Any work around?
Remiz !!! How can I thank you for this “border-radius” solution ??? This is absolutely awesome solution to all the hassle with rounded-corners !!! I’ve checked in almost every available browser and it works beautifully !!! Even in IE 6.0 !!! Firefox, Safari, Chrome, Opera, IE, Flock… everything just works !!! Thank you again !!! Well done !!!
So the only way I can get this to work is if I have the css included in the actual page?? You can’t link the css in a seperate file?
I have the css in a separate stylesheet and it works just fine.
Hi – there is a fatal browser conflict with the htc file and prototype.js in IE8. The browser, when trying to load up the page that contains both, immediately crashes. Prototype.js is found at http://www.prototypejs.org/ and is used with effects packages like MooTools. Is there anything you can do to update or fix? Yours is the most elegant solution for IE8 corners I’ve found – I don’t hope to find a better one but I’m stuck with prototype.js and the browser crashing makes it unusuable. Help?
@deborah : Sad about your situation. But better avoid IE 🙂
Over at CSS3 PIE (css3pie.com) we’re running into the exact same issue; the current version (but not previous versions) of Prototype causes a crash when used in the same document where PIE.htc is attached.
I know this doesn’t help you, I just wanted to mention it here in case you find a solution/workaround as I’d be very grateful for that info. 🙂
this script cannot work in proper manner
when i implement it in their appl then page show an alert box and when do yes then show it
Loving, it. But what about Opera? Or I am missing something?
Update your Opera. It natively supports rounded corners now and has for a couple of versions.
border-radius (no prefix) works in opera
Opera
border-radius: 10px
Use border-top-right-radius for specific corners.
I imagine this will be the convention eventually.
To those of you having problems, this works as advertised with a few caveats… from here: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
* Any element with this hack needs to have position, so unless it already has a position, attach position: relative.
* It can act funny on some elements that are natively inline, even if you attach display: block, although not all the time (fun!).
* It also has issues with elements that don’t ‘have layout’. Attach zoom: 1; to get around this.
* You can only use this on elements with the same border radius applied to all their corners.
* When using this over anything translucent, a white ghost-line will stroke the rounded rectangle.
* Don’t even think about combining this with another IE hack, such as a box-shadow filter hack.
I have made it work in all the places I’ve used it, in containers nested in containers in containers, all with different backgrounds. The containers must have position AND layout which can be done a variety of ways.
No, you cannot round only one corner or do different radius on different corners.
You need to apply both a fill AND a stroke to the object or you wind up with a white outline in IE I believe.
If you can get past these obstacles it works great.
Thanks,
amazing dud.
Seems to not work if in a container with a background-color.
Use this one instead, and all your worries are gone…
http://css3pie.com/
Hi,
I’ve a with position:fixed and inside it there are anchors with a background-color, and after applying your htc file, the background-color of the anchors disappear and become transparent.
And it seems that it’s not working when you have a
ul li a
is that correct ?
I cannot get this to work. Here is what I have done.
1. Downloaded border-radius.htc to the css folder
2. In my css file I added this to the div that I want to have rounded corners.
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(‘css/border-radius.htc’);
so we cant give border on desire side in ie?
i m trying to give but it works on all side in ie while working well in firefox
this script s***! doesn t work on IE
try setting the url of the border-radius.htc relative from the html document, not the css file that sets the behaviour parameter.
I have my css and border-radius.htc in folder called css, the html documents are in root. But in ie.css (which contains the behaviour parameter, and is in folder css) I put: behavior:url(‘css/border-radius.htc’).
Works for me. But there are lots of problems if you have dynamic content that changes the size of elements without a page refresh.
There is a problem when im trying to put a container div with a background!
I’ve the same problem!