Question

css for all browsers:

.bordering {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: #A3815B 0px 1px 3px;
    -moz-box-shadow: #A3815B 0px 1px 3px;
    box-shadow: #A3815B 0px 1px 3px;
}

css for IE:

.bordering {
    border: 1px solid #A3815B;
}

when remove .bordering class from all-browsers css,that border in IE works OK.

How to do,that box-shadow works in FF,Opera and others and generic border works in IE at one time.

tried:

.bordering {
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

didn’t help.

Answer 1

Make a separate CSS for IE like ie.css and link it to your HTML page with this:

<![if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]>

Your CSS will be only included if IE is detected.

After that, put your .bordering CSS in your style.css (for all browser) and put border: xxx only in ie.css.

It should work. I made it a lot of times.