Question

Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px; 

Answer 1

Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.

IE9 however DOES understand border-radius

Update further to comment that it ‘won’t work’ – here is a quick step-by-step (this is a very simple, high-level sample.

1. Download CSS3PIE at http://css3pie.com/download-latest
2. Save the .htc file in the root of your site

3. Lets say you have a div with the id of foo:

   <div id="foo">Hello, I'm rounded</div>
   

Your CSS for this could be:

#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
       -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
       border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  }

You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);

This will cause CSS3 to apply your border-radius rules to IE6-8.