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 there…
thank you for this amazing script. It really helped us out!
There is only one thing missing: the property background-position is not parsed. And I have this background gradient which should align with the bottom of a DIV.
Could you fix that? Thanks in advance!
Kind regards,
Marco Hoefman
Looks great – but how do I download this? Where’s the download button?
I too would like to see support for only making select corners rounded (ie, border-bottom-left-radius)
Works perfectly for me.
Thanks!
The whole div just dissappears, but not the paragraph in it. I tried giving it a high z-index and positioning it, to no avail.
This works in IE but not in compatibility mode in IE 8
i want nor four corner rounded some part like top right and top left part rounded what is the css for this
Very useful tool! Thanks.
Hi there thanks for sharing it, I am getting a black background in IE and the transparent background is not working to fix it.
Is there any way to fix that.
Joe, I get this too. In my case I was able to set background:#ffffff; , but that is obviously not ideal for all cases.
Works fine in IE8, Joomla & Roketthemes CSS3.
I lost 3-4 hours for that.
Many thanks Remiz.
its not working for me
can you help me out please
munawar.fahad@hotmail.com
I can’t find info on where to install the .htc file. I’m assuming in directory with style sheet, and at first I thought I added a new MIME type, but my server already has .htc type. Thanks for help!
Try the root dir of your site. For some reason, IE looks for it there.
Actually this file must be called from the page you are using it, lets create a dir on root called resources/css/border-radius.htc and now lets supposed that we have a file called “css/style.css”, if you have rounded borders on index.html, your style.css must contain a class (i recomend a class) with the following line “behavior: url(resources/css/ie-css3.htc);” (without quotes and adding the border-radius properties)
and the rounded border will be applied =)
But if you put something like “behavior: url(../resources/css/ie-css3.htc);” (for must of us this will be correct) the rounded style will not be applied because we must asume that index.html is the one that uses rounded borders. Regards!! =D
I need the top border out.. I mean like CSS 2 border-top:none;
How could I do that for IE with the htc?
Best regards
Thanks!
However I have a few elements where I only need a bottom or top to be cornered, or even only one corner like:
.class {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
It would be nice if these also were supported.
Nearly Great… but don’t work on all occasion :
You should :
use rel position with left, top @ 0px
add visibiluty style to rect (rect.style.visibility=’visible’;)
and finally add the roundedrect not to the parent element but as a child of the element… (otherwise some event attached to the element could not work in certain circumpstance….)
so the code for the rect should be :
var rect = document.createElement(‘v:roundrect’);
rect.arcsize = arcSize +’5px’;
rect.strokecolor = strokeColor;
rect.strokeWeight = strokeWeight +’px’;
rect.stroked = stroked;
rect.style.display = ‘block’;
rect.style.visibility=’visible’;
rect.style.position = ‘relative’;
rect.style.top = ‘0px’;
rect.style.left = ‘0px’;
rect.style.width = rect_size.width +’px’;
rect.style.height = rect_size.height +’px’;
rect.style.antialias = true;
//rect.style.zIndex = el_zindex-1;
var fill = document.createElement(‘v:fill’);
fill.color = fillColor;
fill.src = fillSrc;
fill.type = ’tile’;
rect.appendChild(fill);
this.appendChild(rect);
I am not able to use. htc while using the background-position in IE *
help me!
=)
sorry but this example isn’t very good..
– “border-radius:10px” is missing after “-moz..” and “-webkit..” for correct display on firefox
– the ie .htc produces black borders
try this instead:
http://fetchak.com/ie-css3/
greetz solarkaine
Thanks man, you absolute help me.