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… I guess Im going to cry… hehehe NICE WORK!!!!!!!!! You may have an idea about how you help the community… but I guarantee you dont quite understand the magnitude of this contribution 😛
Blessings!!
I think it will not work on i.e…so please send me an e-mail so that i will also work in i.e…
how it will work with incase of joomla where i contain file border-radius.htc because i have try but it not work i do this step i go to first of all system and do the setting of mimetype and put border-radius.htc in the template/beez/css/ folder but its not work pls solve this prob
It would be nice if this could work on content created and updated with JS. I have several overlays which move on scroll and resize, it seems that this does not like to work with it.
It also seems to mess up elements with 100% width…. perhaps something to think about when creating the next version.
So I made sure my path is relative to the html, and not css. Now border doesn’t show up at all in IE. I don’t have cpanel access so I had to edit MIME in htaccess. Do you think that’s my prob?
this is what I have in htaccess:
“AddType text/x-component htc”
Hi,
Just found this great solution through word of mouth.
I downloaded the most recent demo (v3), and there is a couple issues in the demo.
Specifically one being that there is some CSS errors in the demo:
Line 26 – In .box2
background: transparent url(ashera.jpg); no-repeat top left;
Error #1 – The uploader didn’t include “ashera.jpg”.
Error #2 – The syntax isn’t correct, the semi-colon should be removed after the url.
Error #3 – Using the “transparent” property is pointless when using a JPG, and it should be switched to a 1px transparent PNG that’s repeated.
I’m going to open a ticket in the Google Code as well.
Strange but even the example doesn’t work for me in any IE
I repeat the ask of Yves, because is important for me:
Lets say that we only want to curve the top right corner,
is this possible with the htc file?
Thank you
Amazing!
How does this post not have 300 comments on it already?? This is a LIFE SAVER for IE. Thank you!
Sorry i got the htc file from the link above.. i couldnt find the link at frst glance 😛
Thanks for sharing now i m trying to implement 🙂
can you please re-upload the .htc file ? i am unable to download it.
Very clever!
Noticed some odd behavior with IE8 in any mode with hidden elements (span, div).
After page load they become visible, probably by design since they must be redrawn in a new state?
Anyhow, it still works well for me even with that quirk and the inability to round fewer than all corners.
Thanks for the hard work on this.
Hey,
First I wanted to say thanks for this.
Second, I noticed that when using rounded corners on a fluid element, it would not resize properly in IE. The fix was simple enough, I just figured I should say something here.
To fix:
in the onresize handler, I added the following lines (I added it somewhere around line 147):
if(el.currentStyle.width == “auto”) {
el.vml.style.width=parseInt(el.offsetWidth – el.vml.strokeWeight);
el.vml.style.height=parseInt(el.offsetHeight – el.vml.strokeWeight)
}
Simple but elegant. Note that the height must be recalculated as well as if the elements content height changes due to wrapping, the height needs to change. There is probably a simple way to check before, but I figure extra logic in there would only serve in slowing things down more.
If you wish to contact me for any reason, my email is filled in correctly and also listed on my website.
Hi, I’m trying to implemet this great solution. But… I’ve ran into a problem in IE:
If a DIV with rounded corners has an image in background, the background image is repeated all over the DIV in IE (all versions tested) regardless if the repetition is set or not.
Do you know about any solution? I’m not a big JS programmer myself, so I ask here for help =)
Thanx a lot…
this is too good but not worked with opera. Pls pls give some solution for opera. Thanks in advance.
Hello there,
I quite like this technique, but my senior isn’t quite happy convinced about playing with HTC files. Do HTC files have any server or security concers that I should be aware of?
I don’t thinknthere is anything with security. Server should have proper mime type set to run htc files. Basically it contains JavaScript. So there is no need to be afraid of using it.
Guillermo – try declaring a background color for your divs.
A solution to the problem in my last post is to put a transparent gif background on the offending element and declare it before the htc fix.
Example:
#container {
background-image: url(images/transparency.gif);
background-repeat:repeat;
}
div.borderradiusfix {
/* IE FIX for border-radius */
behavior:url(border-radius.htc);
}
Guillermo, I am also noticing the same issue using IE8, however it is occuring only in the last few days. Previously it worked as expected. Weird.