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 🙂
well, this is kinda cool. But I can’t find any samples that show how the border-radius.htc will allow just 2 corners with curves. it seems to do all even when they are not set to all.
any clue for that?
Mhmh, I take back what I just said.
After testing Opera it worked as a charmed, but then IE is still not working 🙁
I love this!
I’ve been looking everywhere to make this happen in IE and Opera.
Thank you so much!! =)
super very useful tips
I have installed all files on my site, and the test file works great in IE, however when I insert the styles into my wordpress template files, IE does not display (all other browsers great).
I’ve tried
position: relative;
z-index:0;
and still the div disappears in IE only. Could there be a conflict with my jquery code or something? Sorry if that’s a silly question, this is new to me. Thank you!
This does work, I about threw my hands up in the air until I read Todd’s post.
“position: relative; z-index 0″
This works. If you’re still not sure download the demo from Google and test it out. Worked in all versions of IE for me using IETester, even 5! Impressive.
My problem I have with this HTC, however, is what it does to background images, if you apply the fix to any element with a background-image, it will force it to repeat, overriding what was set before, but this fix works best on solid colored elements.
It works great in Firefox. In IE6, it works ok, but the problem I have is when I close my div, it deletes everything in the div but leaves the div. Any suggestions????
Hi, the border radius for IE is not working. Need help…..
This doesn’t work at all for IE!
Not sure why you happily announce “All browsers” without testing it!
It sucks!
For those who are getting script error on IE, make sure to run it on the server.
I’ve got this working on all but one element on my site — it’s a menu item from a . here’s the code:
CSS:
/*
* MENU
*/
.menu_bar {
border-bottom: 1px solid #fffffe;
background-image: url(‘/new_site123/images/template/menu_gradient.png’);
background-repeat: repeat-x;
background-color: #0b5592;
height: 35px;
}
.navigation {
font-family: “Helvetica Neue”, Helvetica, Verdana, Arial;
font-size: 12px;
height: 35px;
vertical-align: middle;
display: table-cell;
color: #ffffff;
}
.navigation ul {
list-style: none;
padding: 0px;
margin: 0px 65px;
}
.navigation li {
display: block;
float: left;
margin: 0px 5px;
}
.navigation a {
color: #ffffff;
text-decoration: none;
padding: 5px 15px;
font-weight: 200;
}
.navigation a:hover {
color: #fabd0a;
}
.navigation a#current {
background-image: url(‘/new_site123/images/template/current_tab_gradient.png’);
background-repeat: repeat-x;
background-color: #ffffff;
color: #2a2a2a;
padding: 10px 15px 17px 15px;
border: 0px solid #ffffff;
font-weight: 400;
position: relative;
top: -1px;
z-index: 99;
/* Mozilla tab */
-moz-border-radius: 0px 0px 10px 10px;
-moz-box-shadow: 2px 2px 2px #000000;
/* Web-Kit tab */
-webkit-border-radius: 0px 0px 10px 10px;
-webkit-box-shadow: 2px 2px 2px #000000;
/* IE tab */
behavior: url(‘/new_site123/ie-css3.htc’);
}
and the html
Home
any thoughts???
This is cool. The code is still clean. Thank you very much.
@dean
quote=”if you want the bottom 2 corners to have a radius, then use this instead:
border-radius:0 0 5px 5px;
this will leave the top 2 corners the same.”
This still doesn’t work :/
it only seems to work if you want all corners to be curved.