Rounded corners border CSS Problem in IE [ Internet Explorer ] [ Joomla ] [ Solved ]

Here you go.. There is an css code for "good" browsers to change your div's corners to rounded ones. But "bad" browsers such as Internet Explorer ( IE - IE6, IE7 and so on... doesnt works pretty good under this conditions.. ), so here is solution for this problem.


CSS CODE EXAMPLE OF DIV WITH CLASS = "box"

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #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 */
}

There should be like this: "behavior: url(path/to/ie-css3.htc);"

Download url of the ie-css3.htc file. Put the file into root and css folder. ( and into other folders in other cases.. ^^ ):
http://uploading.com/files/dm247e4c/pie.zip/

I faced with this problem while doing rounded corners in Joomla template. Also this resources might be helpful

• http://www.adityad.com/web-designing/rounded-corners-in-internet-explorer/
• http://css3pie.com/documentation/known-issues/
• http://fetchak.com/ie-css3/