Three line css trick to make cross browser curved corner divs
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 🙂
Many people failed to find a download link. So no one will miss it again now 🙂
AI is being used in programming to improve efficiency, accuracy and automation. It is being used in machine learning algorithms…
For a long time since Push notification became a thing on iOS, it was very simple to integrate push notification…
Note: A little bit of a story since I haven't been writing for a while. If you are in a…
There are few things that are quite as universally important in a business like marketing. Good marketing is at the…
Since latest iOS and macOs removed support for PPTP VPN from their built in client, here is how you can…
Back to habits of young days. Shaping up another life. Starting like a kid who is a great king.
View Comments
On IE 6, this CSS Not working.
After this use not any change IE Browser....
I find that this conflicts with IE7's z-index and positioned elements. The background of the element falls below all other elements overlapping the one with the behavior attribute attached to it.
?I have tried it but its not working for me please help me.
this programe is very good
it is working only 4sides but ineed only any of 2 sides or one side is it possible
ya it is possible,
Please Use-
Border-radius: 5px 5px 0px 0px; or,
Border-radius: 0px 5px 0px 5px; or,
Border-radius: 5px 0px 5px 0px; or,
Border-radius: 0px 5px 0px 5px;
Thanks.
Fantastic. This works perfectly.
Hi,
I placed the .htc in the main directory and I can see the page in IE8 with rounded corners to the two .div areas. One though has changed the background to black and I can change it at all. Any suggestions please? http://www.feetfirstpodiatry.co.uk/index21a.html
Thanks
Nev
Can't find the download link, urghhh -.-
Just kidding.
Cool tool - thanks! ;)
Hi I have use this htc file but not find the solution in ie8 and ie7 plz tell me right way to use this htc file for support of border radius & box shadow in ie8 & 7 also.
thank you
nice .. worked on firefox very well .. but not with IE8.. thank you very much
Great work, does it work with the new ei?