How to make rounded border in IE8 with CSS?

Question

I would like to know how to make rounded border in IE8. I\'m using

-moz-border-radius:4px;
-webkit-border-radius:4px;

for mozilla and safar

Answer 1

Download https://code.google.com/p/curved-corner/ and include in your project. Then use the following css to have rounded corner.

For example:

.somediv{
   -webkit-border-radius:4px;        /* older webkit based browsers */
   -khtml-border-radius:4px;         /* older khtml based browsers */
   -moz-border-radius:4px;           /* older firefox */
   border-radius:4px;                /* standard */
   behavior: url(border-radius.htc); /* IE 6-8 */
}

The url to the file is relative to the HTML file which loads the CSS. So this is different to background: url(...) behavior which is relative to the CSS file. More details here

Answer 2

You can use CSS3 PIE for this. It's easy to implement. Just download it here: http://css3pie.com/download/ and extract its contents. Then, on your stylesheet, just put behavior:url(css3pie/PIE.htc); along with the css codes of each element that uses border-radius.

For example:

.samplediv{
    behavior:url(css3pie/PIE.htc);
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;       
    -moz-border-radius:10px;           
    border-radius:10px;               
}

Answer 3

In IE9 you can use border-radius.

For the older IE versions, there are javascript libraries that will do it for you. You can't do it purely with CSS. At the very least you will need background images.

Answer 4

You can't. IE doesn''t handle modern standards and practices and, specifically, no such CSS property exists in IE8.

Answer 5

There's a jQuery plugin for that. http://jquery.malsup.com/corner/