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 🙂
Its work in mozilla but not work in ie6,7,8 plz help
It only works in IE if the four corners are rounded.
hi guys
i am giving curve on left side and left side bottom. its work in firefox but it is not working in ie
can you guys help me how it can work?
thanks
Thanks, this works great on my site.
pls help me
-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;
For those of you have trouble with the fill in a parent container killing this effect it’s because when this script redraws the rounded container, it’s redrawing it behind the parent container with the fill (perhaps Remiz could address this?).
Find a creative way to get your background on a z-index of -1 or in the body. This can be done with absolutely positioned containers (which is a great way to make 100% height columns), etc. There’s a way around everything.
Sorry, should have said a z-index of zero should suffice on your content container.
Let’s face it. IE people are shit outta luck until the browser starts supporting it’s flavor of “border-radius.” Or where they dispense with behaviors and .htc hacks altogether!
IE9 will support border-radius.
Well, this doesn’t work in my case. As with any other solution, it is not one size fits all. I’m giving up, IE users can bloody well have square corners.
hey,
very nice solution indeed. The only silly thing is that microsoft cannot make css3 as an update for their browsers to support and programmers like us have to do their work 🙂
I want to ask about support for border-[left/right]-[top/bottom]-radius property? 🙂
I tested on ie8, used your demo, didn’t work. Are you planning to impleemnt this anytime soon?
I guess it needs some customization in the htc file.
In IE, When rounded corner div inside a div which has given background through css… this htc solution does’t work.
Hi,
border-radius does a great job of rounding corners in IE. In the rounded-corner demo, However, the background image of cat doesn’t zoom with the zoom setting in IE 8. So I end up with a repeated background image within the rounded border when the zoom is greater than 100%, even though in the CSS no-repeat has been specified.
Is there anyway to fix this?
Thanks,
Sam
Hi, lovely idea but it doesn’t seem to work with anything but the simplest case. I have a design that requires lots of floated elements and it seems to just drop my border and background colours and no sign of rounded corners.
I’ve been using http://www.curvycorners.net/ with some limited success… this seems to work until I use M$’s Shadow components..
progid:DXImageTransform.Microsoft.Shadow
Anyone else experiencing similar problems?
Hi,
I was looking for a solution like this one. Thx.
But there is still a problem. I tried to resize my div in JS, and the v:roundrect doesn’t update his size.
Even when i write my sizes in %, window_resize is not triggered.
Any idea for this ?
I dont need this for the website i m developping, so it’s cool for now, but i think i will have to make radius border and risize my divs for other projects.
Thx,
coooool like this
but in thailand has still use IE 🙁
thanks
Yep, I’m also having problems with just a single corner being rounded. Any solutions to this yet?
M.
Doesn’t work with fieldset 🙂