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 🙂
It doesn’t work. MIME type is set, and it’s obviously loading because in IE, instead of showing square boxes it removes them when the page finishes loading. Doesn’t effect Firefox, it still shows the sexy rounded borders.
.mozborder {
border: 1px solid ThreeDShadow;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 3em;
min-width: 1em;
max-width: 20em;
margin: 4em auto;
background-color: #FFFFFF;
behavior:url(/resources/css/border-radius.htc)
}
Any working fix around for opera? :s
A great addition to this would be to support the individual corner syntax, so you could curve a box just on the top or bottom.
-moz-border-radius: 0px 0px 10px 10px; /* curved on the bottom */
-moz-border-radius-bottomright: 10px; /* on the bottom right */
That would rock!
thanks for the tip buddy. really helps 🙂
Hi richT, Thanks for this information! but it’s not well working for me.
the curved corner disapear with this add… I can’t see the curved corner and shadow at the same time.
.htc ( line 92 ):
rect.style.filter = ‘progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=120,strength=10)’;
Thanks for your help!!!
css:
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
border-radius: 11px;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=120,strength=10);
behavior: url(border-radius.htc);
Thx, For IE fix
thanks for the great script.
I wanted curved corners *and* a box-shadow for IE.
box-shadow for IE can usually be achieved using something like
filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=2);
see http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html
Combining the two didn’t work as IE applied the shadow to the text not the container.
With an small addition to your script on line after line 92 the problem was solved.
rect.style.filter = ‘progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=2)’;
hope that might be useful to someone else!
Very good css technique
The htc file seems to move the element to the background. I have a page where a menu with rounded corners floats partly on top of the white page content element. When I load it into IE7 the menu displays on top of the content with square edges and a fraction of a second later (after loading the htc I assume) it gets round corners but is positioned *behind* the content element. Adding a z-index to the menu didn’t help, nor did moving the menu HTML code to be after the page content.
Hmm… .htc file doesn’t exist any longer!?
(same with the .zip)
This code only works in IE8, Mozilla, Safari
I findout one nice solution from the site
http://www.html.it/articoli/nifty/index.html
Please do it is better than images setup.
But it is not work in Google Chrome too..
Hey Guys,
You guys are doing very good job 🙂 keep it up…
my best wishes with you.
thnx
Any chance to support background-image property along with the border-radius?
It may be nice tutorial if working download link of http://www.htmlremix.com/files/20080924-border-radius.zip and border-radius.htc
This might work well for a person just wanting to surf around on the internet and see some neat curved cornered css items.
The only problem is from the view of someone producing sites using this, what are we supposed to do ask every person browsing your site to start jacking around mime types… That becomes a bit of a problem with 80% of people. Its a lil complicated of a task to ask Joe Shmoe.
How about Microsoft get its ass in gear and join in with the rest of the club.
I got a black background over the text in my div , any ideas?