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 🙂
same here, not working.
demo files are fine, but when i add it to my css nothing happens
i’ve tried building a simple example and it does work, but with existing page no way
i’m testing it in local so i cannot post a link, i’ve tried changing file path (i know it shouldn’t be a solution but you never know 😀 ) and file name, still nothing
i suspect it could be some jquery conflict though i’m not a js expert, gonna investigate further
I haven’t tested, but the latest version appears to use the smallest value of the css settings:
-moz-border-radius
-webkit-border-radius
-khtml-border-radius
border-radius
So if you don’t have all of them set, it will potentially read a 0, thus no border radius.
thanks for your suggestion, unluckily it didn’t fix anything
gonna try some other methods
hi,
the demo is not working in IE8. So its not IE compatible although it tells it can in last update?
background disappear in IE 6 to 8
with dis htc file how can i make the border only for bottomright and bottomrleft for my div..
Is it possible if so, pls send to soruce code with new htc file
Why not just simply round for DIVs?
I tried this in a modified variant and doesn’t work in IE 🙁
All I did was to give up the external file
I wonder where the download link is 😉
It’s not workinng in IE8 and IE7 ;
This is my css code
#main { width:655px; overflow:hidden; margin:0 auto; background:#C3D92F; position:relative;
-moz-box-shadow: 0px 0px 15px #000; /* Firefox */
-webkit-box-shadow: 0px 0px 15px #000; /* Safari and Chrome */
box-shadow:0px 0px 15px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the ‘box’ class */
}
.header { width:625px; margin:0 auto; padding:7px 0;}
.logo { width:105px; float:left; overflow:hidden;}
.titre { width:330px; float:right;}
.page { background:#fff; padding:10px 0;}
.contenue { width:490px; overflow:hidden; margin:0 auto; background:#F6F6F6; position:relative; padding:15px 50px ; text-align:left;
border:1px solid #B7B7B5;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius: 15px;
behavior:url(border-radius.htc);
}
I think this .htc file conflict with position properties. like “position :relative”;
does not work
why?
code:
Biblia Tag
body {
background-color: #fff;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
.tag {
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #fff;
font-weight: bold;
border: 11px solid #35b70e;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
}
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
try using url path:
example – behavior: url(http://subdirectory/border-radius.htc);
anyone have any problems with the background not displaying 100% of the time on IE? I have a background image right now. will it help if i just turn it into a bg color only?
works fine, but background-repeat / background-position attributes just don’t work in internet explorer
For my Limousine Paris Website, i used this script which worked perfectly.
Thank you very much from a parisian chauffeur 😉
Works great in ie8 but in ie7 I am getting a wierd extra 1 pixel of border… any idea why?
please, is there any site i could upload for free this .htc?!
or behavior:url(your_link_here_god_bless_you.htc);
I am experiencing mixed results with this “hack”. On some IE versions, the curved element will “flash” in it’s normal “box”/div form, and then the background goes bye-bye.
I am using a bg image for the div…
Any fixes?
CSS3 does not support background images, I know this sucks!