Tuesday, March 22, 2011

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.

.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.. ^^ ):

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

1 comment:

  1. How this will help me. And i wish i found this before i was trying to fix my problem. Main problem in my situation was putting the ie-css3.htc into css folder, while it should be in root directory.

    Once again, hope it will help you guys <3