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
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
410 Responses to “Curved corner (border-radius) cross browser”
Leave a Reply
You’re a lifesaver
Keep up the good work
how i can specific which corner i need to curve
eg. right top corner or left top corner only can be curved ?
thanks
hi,
I downloaded your htc file. I added the 3 simple lines .
I work on: .NET I test my site on FF and IE7 and IE8 .
1. behavior – my css does not know this .
2. it is not working in IE, do I need to add hte Mime type?
Great HTC script, but it doesn’t work when you hover A element(a:hover) any workaround?
Hi,
Thanks very much. Works brilliantly except I can’t make it work with Spry collapsible panels in IE (fine in Firefox). Any suggestions gratefully received.
Thanks
Please take the right link, there you can download all the files:
http://code.google.com/p/curved-corner/
dears i try and try to work by .htc file but work good all browsers except IE8 make hide all content in the div have class curved
plz help me
Not working in IE8
.curved {
moz-border-radius:10px;
webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
Calling
http://www.htmlremix.com/files/20080924-border-radius/border-radius.htc
404 Error occur when i open it please re correct it.
I just tried this in IE8 (win7 x64) and came up with an activex dialog that required me to accept script access in order to get the rounding.
Is this default behavior in IE8? Does it happen in the other IEs?
For many years (approx 2 hours) I’ve been looking through complex codes.
and all it took was THIS?!!!!!!!!!!!!!!!!!!!
THANKYOU so much. Ymmd.
Is there any way to get background-repeat and background-position to work within a rounded rectangle? I can see fill.type=’tile’ is set in the htc code which is part of the problem. However it seems that there is no option under type (http://msdn.microsoft.com/en-us/library/bb229619%28VS.85%29.aspx) that allows for a single image anchored as a background within the element, even when using Origin and AlignShape attributes. Any thoughts on how to make this work? (I don’t want to stretch the image either so I can’t use ‘frame’)
Hy!
I was tried the .htc but in IE I loose the background and border parameters not displayed the background image and borderline
what’s wrong?
I have implemented this plugin and it seems that it doesn’t work in some versions of IE6. Check: http://spoon.net/browsers/
Really neat, but also extremely buggy. About 60% of my round-cornered blocks go haywire in IE7. Success with only the simplest layout components. Wherever there is complexity of any sort, this method falls on its face. And the failures are not the slightest bit graceful. Many cause show-stopping failures in readability.
And yet I also now have very nice rounded corners on a few simple page elements.
Great work.
A year ago, I was able to implement this and have it work cross-browser including IE’s. However, lately I haven’t had any success. In IE, the element’s background is taken away mysteriously.
Awesome, rounded corners in IE. I’m using it on some buttons (anchor tags) but the background-color in the :hover is ignored. Any way to get that working? Other than that it’s great. Thanks!
Hi. I try this method but nothing. It doesn’t work. I download the file HTC and i create the file HTML with your description and the file CSS. But the round corner don’t appear in IE8. Only with Mozilla. What can I do?!
Pleare reply me
Hi , good job. But ı don’t download border-radius.htc. Because “404 not found”
can you correct link ?
Thank you out there – was exactly looking 4 that!
Best regards!