How do I use CSS to create rounded corners in IE 8?

Question

How do I use CSS to create rounded corners in IE 8? Since the CSS rule corner-radius doesn't work is there a solution to create rounded corners in using CSS in IE8 (or IE6, and IE7).

score 4 · Accepted Answer · edited Mar 20 '13 at 20:28

4

After a lot of research, I have found that there is a fix similar to the PNG transparancy fix available to IE6, called CSS3Pie. The website to the solution is found here: http://css3pie.com

You will simply have to add behavior: url(path/to/pie_files/PIE.htc); to your css anywhere you wish to implement rounded corners.

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/pie_files/PIE.htc);
}

edited Mar 20 '13 at 20:28

NodeDad

1,519
2
19
48

answered Mar 20 '13 at 20:12

ktamlyn

4,519
2
30
41

CSS3PIE is very solid for this; I would recommend 100% – faino Mar 20 '13 at 20:30
1

Note that the `.htc` path is relative to the HTML page, not the CSS file. Or read the doc carefully – FelipeAls Mar 20 '13 at 21:49

How do I use CSS to create rounded corners in IE 8?

1 Answers1