CSS Rounded border for div works on chrome and ff, but not on IE

Question

Hello,

I have this CSS style that does a rounded corners for div border, but for some reason IE does not like this code.

#selector{
    background-color:#DBDBDB;
    margin-top:-23px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color:rgba(255,255,255,0.5);  
}

How can do rounded div border on IE.

Thanks Jean

Answer 1

IE doesn't have CSS based rounded corner option yet, I use a jQuery Corner plugin to do this.

Answer 2

IE does not support rounded corners as CSS as yet, maybe it will arrive in IE9, but I use something called DDroundies whick uses Javascript to make your IE borders nicely round using code only.

Example:

<script src="ddroundies.js" type="text/javascript"></script>
<script type="text/javascript">


  <!-- IE only-->
  DD_roundies.addRule('#cvr input.text', '5px', false);

 DD_roundies.addRule('div #roundbigbox', '10px', false);
</script>

Answer 3

I am afraid it's not possible for IE with CSS only.

See exemplary page on Flickr.com website -- it uses rounder corners for buttons, but not for IE. If Yahoo can live with that -- you could try too :).

Answer 4

There are also a number of ways to achieve this without using JS. It's really up to your personal preference though.

It can be achieved by nesting divs inside each other and overlaying background images at the corners.

The Thrashbox is a fairly simple XHTML and CSS based solution to the problem.