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 🙂
this is not properly working in IE 7 Or if there are more than 2 or 3 html conetent then it gives un-even shapes…and page becomes very slow loading
Same problem as twitch, nested divs loose their background properties. Anyone found a solution?
Very good designed component.Can you please tell me what change i have to do ,if i want only top right and lop lets curve only,or i want to make bottom right and bottom left curve only.
I mean curve only specific are top-right ,top-left,bottom-right,bottom-left.
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:0;
-webkit-border-radius-bottomleft:0;
-webkit-border-radius-bottomright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:0;
border-radius-bottomleft:0;
border-radius-bottomright:10px;
border-radius-topleft:10px;
border-radius-topright:0;
And for IE, you will need to wait for next version of this htc . Or do it yourself 🙂
Nope, it dont work in te latest version of ie7. I dont know what you people above did, but it absolutely doesnt work in IE7, any help???? Thanks.
and why in the name of zuses buthole does ie not have a simple css line like -ie-corner-radius:?????? cant someone talk them into updating ie to do this? or even simply corner-radius? they make no sence to me. Why can’t they keep ie up to date with FF???
Easy to implement and makes IE look like FF with rounded corners. Very Nice!
I would like to have it display the rounded corners without having to redraw the curved items.
This is a fantastic idea – especially for themes or templates where users want to customise the size of elements but don’t want to be spending hours in Photoshop making tiny rounded corners and then having to PNG-fix everything for IE6. The Javascript methods around are just overkill when they require hundreds of kilobytes of code and slow page rendering to a crawl. I’ve abandoned curvy-corners now for that reason and the fact the code conflicts with other, more essential, Javascripts loaded in the page.
The only issue (as mentioned by another user) is that this method does not seem to work in Internet Explorer 8. I don’t know if it is just a simple compatibility glitch or something a lot more serious? But it would be great if a method could be devised to get rounded corners into IE8 without images or bloated scripts. Bookmarked this page.
This is great code. Is there a way to tweak it so that it will work with absolutely positioned objects in IE7? Here’s a demo page.
http://www.flavorzoom.com/remix_corners_tryout/temp.html
This is one of the most elegant solutions I’ve found, however I couldn’t get it to work on just some corners:
-moz-border-radius-bottomright:20px; or
-moz-border-radius:0 0 20px 0;
when putting a rounded div inside another rounded div, although firefox displays it flawlessly (obviously), IE strips the DIV of background colour (possibly more, cant tell from looking) is there a way to fix this?
Wow thanks so much for this script. Great idea. :]
It seems to not work If you use multiple box with rounded corner in IE, no problem with firefox.
Has anyone got this going for IE8? It just disregards all background colors and borders with this.
Seems to work fine for me so far, using this
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
behavior:url(border-radius.htc);
I now have support in all major browsers, Firefox, Safari, IE 6 & 7. Only tried it in a test file so far but I’m using floats and it seems fine.
Going to try in my actual project tomorrow so I will report back if I encounter any issues.
Great script though, this will save me hours of work in Photoshop.
another problem with IEs.
take a curvedcorner-box, give it an 8 px padding, display:block.
now put a table in it with 100% width and text align right in the last cell – it runs out of the box.
This is great, works with IE6 and IE7 for me.
Unfortunately it lacks support for border-top-left-radius, border-top-right-radius,border-bottom-left-radius, border-top-right-radius – could these be added ?
nice solution, but on IE7 the script is blocked by the protection filter.
gionni November 12th, 2008 (#):
Thanks great script!
To eliminate borders stroked=”False” in the roundrect.
I would like to post my “thanks” for the script too – and of course to gionni for the “border-eliminating-hint”. Does anybody know, how to change the script for setting borders on top or bottom only?
you rules¡¡¡-…from Chile