Question

I am having problems getting the JQuery Library “Rounded Corners” to work in IE. All I want to do is simulate border-radius on a div in Internet Explorer. I have gotten the addon to work in Firefox, but I think that’s because this addon takes advantage of that CSS property. I have also gotten it to work in IE, but only on basic DIVs.

Here is the addon’s home page: http://jquery.malsup.com/corner/

Here is the code:

CSS

<style>
#mydiv { /*basic CSS for the DIV*/
    border: 1px solid #76B4EA;
    border-bottom: none;
    box-shadow: inset -10px 10px 30px #e0e0e0, 2px -2px 1px #707070;
    background: #fff;
    width: 200px;
    height: 80px;
    margin-top: 21px;
    z-index: 3;
    margin-left:2px; 
    position: absolute
}
#ie-shadow { /*code for a cross-browser shadow*/
    display: none;
}
</style>
<!--[if lte IE 8]>/*more code for the cross-browser shadow*/
<style>
#ie-shadow {
    display: block;
    position: absolute;
    top: 17px;
    left: 2px;
    width: 200px;
    height: 80px;
    z-index: 1;
    background: #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2', MakeShadow='true', ShadowOpacity='0.40');

}
</style>
<![endif]-->

HTML

<div id="mydiv"></div>
<div id="ie-shadow">&nbsp;</div>

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>
<script type="text/javascript">
$('#mydiv').corner("rounded top 10px keep cc:transparent");
</script>

Answer 1

I’m going to suggest a better option: PIE.htc.

Download it here: http://css3pie.com/

USAGE

Extract the PIE.htc file to your root directory. In your CSS, you can do the following:

.round-em {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  behavior: url('PIE.htc');
}

NOTE: The location of the PIE.htc is relative to the HTML file, NOT the CSS file. Also, you may ONLY use the shorthand of border-radius. You cannot specify border-top-left-radius, for example, when using the hack for IE.

You can take it a step further by adding an IE conditional (PIE.htc does not play nice with IE9+):

.round-em {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

<!--[if lt IE 9]>
.round-em {
behavior: url('PIE.htc');
}
<![endif]-->

EDIT

Since you cannot load the PIE.htc script across domains, you can use PIE.js. Here is the link: http://css3pie.com/documentation/pie-js/

There is a hosted version available here: http://cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js

HOW TO USE PIE.JS

First, call the script via an IE conditional:

<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js"></script>
<![endif]-->

Next, use jQuery to iterate through each of the elements that have round-em as a class. Then, use the PIE.attach method and pass in the this context as a parameter.

$(function() {
  if (window.PIE) {
    $('.rounded').each(function() {
      PIE.attach(this);
    });
  }
});