Curved corner (border-radius) cross browser
24 September 2008 - by RemizUpdate: 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





Comments
98 Comments until now
Anees
September 25th, 2008
hmm.. Good try, this is interesting, also this can reduce a lot of codes in the page…
Keep exploring. all d best
Martin
September 25th, 2008
Great idea with that htc File! But somehow it doesnt work in Multiple IE6. Iam going to test it on a real XP SP2 IE6 install later on.
Martin
September 25th, 2008
Ok, iam back here i checked on Browsercam with XP SP2 and it worked Fine!
Great!
Henrik
September 25th, 2008
There are some problems with this script when using floats, it will tamper with margins and therefor layouts will be wacked
Rick
September 26th, 2008
Fresh concept!
Needs some work to avoid text in the curved part of the div (border)
Keep up the good work
Paul Gonella
September 27th, 2008
For some reason if I have no border set in my CSS in IE7 the curved corner DIV has a black border that I can’t remove.
Any ideas?
abecadlo
September 27th, 2008
it doesn’t work with Opera 8.21 and IE 6 on Win XP …
Marin
October 21st, 2008
Awesome script Remiz
@abecadlo normal for Opera it does not support htc behaviors. your IE6 must be a standalone version.
@Paul Gonella: normal: there is a stroke. Apparently it cannot be removed.
I’ve tweaked the htc so that the stroke has the same color as the background-color
l.30 strokecolor=”‘ + fillColor + ‘”
and I’ve adapted my version so that the width and height are always the same as the elements the script applies to:
var w=this.offsetWidth,h=this.offsetHeight;
width: ‘+(w-2)+’px; height:’+(h-2)+’px; antialias: true; in the roundrect
Salco
October 21st, 2008
@ Martin
So you’r gonna make it work well.
Why dont you drop your version of htc here?
Marin
October 21st, 2008
@Salco I will when it’s done and cleaned
Roman
October 31st, 2008
Rly all browsers? wat about firefox2? icab? konqueror?
David
October 31st, 2008
Hum… it seem to work on ie7… is that normal? what about google chrome? I’ll try getting some spare time to play with it.
Looks great on firefox though!
Good job
ismael
November 3rd, 2008
Thanks for the script.
Works perfect… or almost.
For some reason, it also removes some styles within divs.
See, for instance, the tag cloud in
http://ictlogy.net/bibciter
Now deactivated for IE, but, if activated, the tag cloud becomes a normal bullet list. Weird.
web designer
November 6th, 2008
yes it works very nice
Martijn Laarman
November 6th, 2008
Firefox 2.0.0.17 chokes on the image bit, it does draw the curver border i’ts not wide enough to cover the entire edge of the image.
My I7 complains when trying to set arcSize, heres the watch on ‘this’
this
{…}
defaults: Access is denied.
document: {object}
element: {object}
Also without any JS stuff is a bit misleading
PHP Developer
November 8th, 2008
There are many simple and javascript enabled complex examples to build rounded box. But the best is which are exandable freely and not of fixed with.. Regards Bikram
SEO Tutorial
November 8th, 2008
I am trying to fix the joomla layout by including this type of box. Can anybody help me
gionni
November 12th, 2008
Thanks great script!
To eliminate borders stroked=”False” in the roundrect.
Google experimental timeline - Future search is real? | HTML Remix
November 23rd, 2008
[...] for the keyword “cross browser” for which my blog got good ranking for the post cross browser curved corner div using border radius. I tried to find who ranked before me for the keyword “cross browser”. But [...]
Atiminou
November 26th, 2008
Hi, I would like to know if this works on all IEs? cuz your example doesn’t show on mine…the supposed to be rounded box is not. thanks!
gmeza
November 28th, 2008
you rules¡¡¡-…from Chile
job
December 17th, 2008
gionni November 12th, 2008 (#):
Thanks great script!
To eliminate borders stroked=”False” in the roundrect.
I would like to post my “thanks” for the script too – and of course to gionni for the “border-eliminating-hint”. Does anybody know, how to change the script for setting borders on top or bottom only?
Deswign
December 17th, 2008
nice solution, but on IE7 the script is blocked by the protection filter.
Sonic
December 19th, 2008
This is great, works with IE6 and IE7 for me.
Unfortunately it lacks support for border-top-left-radius, border-top-right-radius,border-bottom-left-radius, border-top-right-radius – could these be added ?
job
December 22nd, 2008
another problem with IEs.
take a curvedcorner-box, give it an 8 px padding, display:block.
now put a table in it with 100% width and text align right in the last cell – it runs out of the box.
Richard Dale
January 3rd, 2009
Seems to work fine for me so far, using this
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
behavior:url(border-radius.htc);
I now have support in all major browsers, Firefox, Safari, IE 6 & 7. Only tried it in a test file so far but I’m using floats and it seems fine.
Going to try in my actual project tomorrow so I will report back if I encounter any issues.
Great script though, this will save me hours of work in Photoshop.
AJ
January 8th, 2009
Has anyone got this going for IE8? It just disregards all background colors and borders with this.
JD
January 10th, 2009
It seems to not work If you use multiple box with rounded corner in IE, no problem with firefox.
Redondeando (bordes) | keeGeek
January 10th, 2009
[...] hace uso de un sistema para Internet Explorer que se basa en un archivo .htc. Es una buena opción, debido a que no es necesario mucho código [...]
Evan
January 13th, 2009
Wow thanks so much for this script. Great idea. :]
About the CSS3 border radius property | nkuttler
January 17th, 2009
[...] blog. He has an awesome looking technique for rounded corners in IE. Another technique by Demiz looks slightly little less promising, but I have to test both yet, see the other technique for [...]
twitch
January 23rd, 2009
when putting a rounded div inside another rounded div, although firefox displays it flawlessly (obviously), IE strips the DIV of background colour (possibly more, cant tell from looking) is there a way to fix this?
Alex
January 26th, 2009
This is one of the most elegant solutions I’ve found, however I couldn’t get it to work on just some corners:
-moz-border-radius-bottomright:20px; or
-moz-border-radius:0 0 20px 0;
Vik
January 27th, 2009
This is great code. Is there a way to tweak it so that it will work with absolutely positioned objects in IE7? Here’s a demo page.
http://www.flavorzoom.com/remix_corners_tryout/temp.html
Will Woodgate
January 31st, 2009
This is a fantastic idea – especially for themes or templates where users want to customise the size of elements but don’t want to be spending hours in Photoshop making tiny rounded corners and then having to PNG-fix everything for IE6. The Javascript methods around are just overkill when they require hundreds of kilobytes of code and slow page rendering to a crawl. I’ve abandoned curvy-corners now for that reason and the fact the code conflicts with other, more essential, Javascripts loaded in the page.
The only issue (as mentioned by another user) is that this method does not seem to work in Internet Explorer 8. I don’t know if it is just a simple compatibility glitch or something a lot more serious? But it would be great if a method could be devised to get rounded corners into IE8 without images or bloated scripts. Bookmarked this page.
Tom Armstrong
January 31st, 2009
Easy to implement and makes IE look like FF with rounded corners. Very Nice!
I would like to have it display the rounded corners without having to redraw the curved items.
Ben
February 4th, 2009
Nope, it dont work in te latest version of ie7. I dont know what you people above did, but it absolutely doesnt work in IE7, any help???? Thanks.
and why in the name of zuses buthole does ie not have a simple css line like -ie-corner-radius:?????? cant someone talk them into updating ie to do this? or even simply corner-radius? they make no sence to me. Why can’t they keep ie up to date with FF???
Rishit Patel
February 5th, 2009
Very good designed component.Can you please tell me what change i have to do ,if i want only top right and lop lets curve only,or i want to make bottom right and bottom left curve only.
I mean curve only specific are top-right ,top-left,bottom-right,bottom-left.
Remiz
February 5th, 2009
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:0;
-webkit-border-radius-bottomleft:0;
-webkit-border-radius-bottomright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:0;
border-radius-bottomleft:0;
border-radius-bottomright:10px;
border-radius-topleft:10px;
border-radius-topright:0;
And for IE, you will need to wait for next version of this htc . Or do it yourself
13twelve
February 5th, 2009
Same problem as twitch, nested divs loose their background properties. Anyone found a solution?
kunal
February 12th, 2009
this is not properly working in IE 7 Or if there are more than 2 or 3 html conetent then it gives un-even shapes…and page becomes very slow loading
Simon
February 16th, 2009
Is it possible to refer to a div’s id and not to a class? How would I need to change the .htc file in such a case?
Mark T
February 17th, 2009
Has anyone been able to get this to work inside tables? I can get it to work fine on test pages with no tables, but where I have a hybrid site with primary layout in CSS, but subsections using tables, it doesn’t work.
Julia
February 18th, 2009
By using -moz & -webkit in your CSS, wouldn’t it make it invalid CSS 2.1?
bince
February 19th, 2009
NICE work… Thank you very much…i like it…
robin
February 19th, 2009
thanks a lot, love google, love this htc
Vladorz
February 19th, 2009
Thank You very much… very easy to use… Cool Tutorial
Jon S
February 20th, 2009
awesome!! did “Marin October 21st, 2008 (#): ” ever finish the modified .htc make the border the same colour as the element?
conor
February 20th, 2009
great idea. thanks
Annand
February 20th, 2009
This worked really well. Thanks!
Daddy
February 23rd, 2009
Hi every one… have any solution in ??? “Curved corner (border-radius) cross browser” Not Working in Windows XP Sp2 – “ie6″…
Zach
February 23rd, 2009
I spent all day today trying to solve a bug with jquery.corner.js in safari. Problem solved 5 minutes after reading this. It was a real facepalm moment.
Thanks for publishing this! Wish I had found this BEFORE I tried to use jquery. (When all you have is a hammer…)
Daddy
February 24th, 2009
Thanks a lot…. I fix the my Round Box IE6 issues…
(Y)
Bugsy
February 24th, 2009
Doesn’t work on IE8 with a doctype. If I remove the doctype, it works. Please fix this.
Jo
February 25th, 2009
I need step by step instructions to implement this ..can any one help
Remiz
February 25th, 2009
Brother,
This has no steps
add the style in ur style file. put that htc in the proper path. ( same folder as css if using same code above )
Add class “curved” for the dic which you want to make curved.
done
Jo
February 25th, 2009
sorry for being such a novice will give it a go! Tar x
Jo
February 25th, 2009
i still cannot do it …I am poo!
Ellen
February 26th, 2009
Super sweet. Thank you. My buttons look fantastic!
Kevin
February 27th, 2009
This script kills opacity/alpha in IE div objects…. any idea how this can be fixed? Also can this be implemented on individual corners instead of all corners?
mab
March 1st, 2009
hi… i used this cod on my aspx pages.. and not working in IE7 browser…????!!!! but i used on my html page and working no problem in IE7!!!!! and hide /*behavior: url(css/border-radius.htc);*/
line on aspx pages to working in IE7 without radius…
Filipe Silva
March 5th, 2009
i don’t know why, but if i have the css and the htc file in the root of my project it works great. but when i put them in the css folder it stops working in ie7
anyone had this problem?
Jon Bolden
March 8th, 2009
Not a good solution if it’s not valid and it requires a htc file. Behavior property isn’t valid either. Great idea, but just doesn’t cut it.
Harmen
March 11th, 2009
How can I get this to work with absolute positioned elements? Thanks in advance…
Aakash Agarwal
March 12th, 2009
Great post!!!
However, there are some problems which I personally encounter while using the code.
1. The script fails if being used on a table inside another table which is using the same script.
2. I wanted to send emails using this .htc file, but unable to create the table corners rounded.
Thanks!!!
Andrei
March 16th, 2009
It doesn’t seem to work with IE8…
mamilldo
March 17th, 2009
Hi!
I´ve tried this bloggpost with XPsp2 – IE7 and Vista IE7 and IE8, none showing rounded corners for your blogg. (I know it should beacuse I´m using mac with safari otherwise)
Does anyone have an explanation to why it doesnt work – apparantly it works for several people here. (Would be nice to use this great idea)
Roly
March 18th, 2009
Hi! I was trying to find a nice & simple solution to do some rounded-corners. Your solution helped me alote !
Thank’s !
Anand
March 19th, 2009
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
Not Applied in IE
only Applied this -moz-border-radius:10px;.
Lushanthan
March 19th, 2009
i was searching for this one mate… thanks alot
rui zhang
March 19th, 2009
I am not seeing the curves in IE6 and IE7 for running the demo http://www.htmlremix.com/files/20080924-border-radius.zip?
Dave
March 23rd, 2009
Also fails if you have a curved div inside another curved div.
I added this:
Curvd div
asdf
to the example and the inner div shows up as all black.
FF/Chrome/Safari all show properly.
Ian
March 24th, 2009
I too am finding nested curved div’s are a problem in IE. Firefox is fine and I assume other non IE browesers are too.
A single (non-nested) curved div works fine but nested curved div’s do not appear at all.
This seems to be a restriction with VML.
Does anyone know a way, or if it’s even possible to have nested VML shapes?
Mudasser Abbas
March 27th, 2009
curved div is working in I.E 7.0 but i m getting a probelm.
div is showing black border. i don;t know how to remove this border..
will someone help me to remove this border..
Waiting for reply
Mudasser
TheNyeLabs.com » well hot dang
April 1st, 2009
[...] Then I found this guy [...]
shubha
April 2nd, 2009
Hey its not working with IE7.. VS 2005.. Windows XP SP2
but its working well with mozilla..
So is there any technique, that i can use this in IE 7 also??
IE 7 Demo doesn't work
April 9th, 2009
Hi,
the demo file provided for download doesn’t work with IE 7 XP SP3!
What’s wrong? You can’t really call that cross-browser support, can you?
Vadim
April 11th, 2009
I’m trying to make nested rounded corner blocks in IEs, but it does not seem to work. Does anybody have the solution?
euueh
April 15th, 2009
hello there
something is wrong…
in html files its fine, but in php the damn IE just dont read the htc…
anyone can help me?
and sorry for my poor english…
fnigl
April 16th, 2009
Hi,
This script works perfekt…
but i would like only to have two rounded corners like this in firefox:
-moz-border-radius: 10px 10px 0px 0px;
Is there any way i can make this happen with this script?
Anne
April 17th, 2009
Doesn’t work for me.
Shail
April 17th, 2009
Thnx alot… Keep exploring…… Being gr8 job…..
Joe
May 1st, 2009
Hello, Great piece. When I add this to my div css
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=57)”;
it doesn’t work. If I take away the htc class (and remove the rounded corners) the opacity works. Any thoughts on how I could make both work together?
Thanks.
Amr
May 18th, 2009
does it compatable with IE8
Shweta
May 26th, 2009
Great script, saved us a lot of effort
But I am facing a strange problem, that the div becomes totally eliptical in shape from time to time, and on a refresh the div gets back to normal (with curved borders). Am I going wrong anywhere?
Please help
Thanks in advance
Amy
May 27th, 2009
This seems to work in IE8 Compatibility View, but without this pressed it disregards all background colours, borders etc. Bit of a pain. Would love to know if anyone finds a solution.
Syrillix
June 2nd, 2009
For those of you having an issue with the black border in IE, if you look at the HTC file it uses the border color as the stroke color for the border. If you havent set it, it uses the IE default (black). So in your style set the border color to your background color and it will be golden.
Nice solution btw, however I found it causes some rendering problems when you need to change the content of the curved div (form validating messages etc).
DirkO
June 6th, 2009
Well done, Remiz
What license do you grant for this script?
Is it free to use or do you plan any restrictions later?
DirkO
Remiz
June 6th, 2009
It is in CC licence already. Hosted on Google Codes.
http://www.htmlremix.com/css/css-curved-corner-on-google-code
Farhad
June 7th, 2009
Very Very Good
Thank You
10 properties that were impossible to implement in IE6 | Productivedreams.com
June 7th, 2009
[...] details on how to add MIME type visit Microsoft SupportAll you need to do is download the htc from HTMLremix and include the following code in your CSS. [...]
satish
June 17th, 2009
well done boy thnks
Anna
June 19th, 2009
Awesome! I was looking for something that would work cross browser. Though it craps out in IE8. Let’s hope this plays nice with IE8 soon.
I am using it on just one div (with several non-rounded nested divs) and it flashes for a second the div i am rounding (which is un-rounded at that point). I am NOT using it in IE8 compatibility mode. Hopefully someone finds a solution to this soon.
Vikrant
June 20th, 2009
Hi Remiz
How to use this .htc for only topleft and topright corner, as I want to use it for Tab Menu
10 CSS properties missing in IE6 | Special News | Technology News,Gadget Reviews,Auto & Car News,Finance & Career News,Broadband in India.
June 25th, 2009
[...] you need to do is download the htc from HTMLremix and include the following code in your [...]
radu
June 30th, 2009
Can someone show me this type of code in wikipedia? I mean in my user page to add this code. I’ve tried this code but no work:
{| cellpadding=”20″ cellspacing=”16″ style=”-moz-border-radius:20px; -webkit-border-radius:20px; behavior:url(http://www.htmlremix.com/files/20080924-border-radius/border-radius.htc); width: 100%; background-color: #FC0; border: 1px solid #000; vertical-align: top;”
|-
|style=”-moz-border-radius: 20px; background-color: #F5F5DC; border: 1px solid #000; vertical-align: top;” rowspan=”2″ |
”
|}
Any ideea?
makinero
July 3rd, 2009
This file works great for IE but what about opera 9 ? It doesn’t support border radius at the moment. Is it possible to make this script work in it ? This is just to wait the next version witch will support border radius.
Thank you !
Ivo
July 3rd, 2009
Wow, it works perfectly fine by me !
Thanks a lot !