How to apply border radius in IE8 and below IE8 browsers?

1

I was able to do by using jquery.corner.js but the edges are not smooth enoughin IE8 and by using css3pie.com the background is becoming black in IE8 – user2594152 Jul 24 '13 at 10:36

score 7 · Answer 2 · answered Jul 24 '13 at 09:55

7

Firstly for technical accuracy, border-radius is not a HTML5 feature, it's a CSS3 feature.

The best script I've found to render box shadows & rounded corners in older IE versions is IE-CSS3. It translates CSS3 syntax into VML (an IE-specific Vector language like SVG) and renders them on screen.

It works a lot better on IE7-8 than on IE6, but does support IE6 as well. I didn't think much to PIE when I used it and found that (like HTC) it wasn't really built to be functional.

answered Jul 24 '13 at 09:55

Glitch Desire

14,632
7
43
55

This answer is very standard. CSS3 Pie requires to add z-index and position:relative at some parent div to render properly which affects the complete design terribly. UPvoteD. – Sakthivel Oct 07 '13 at 08:13

score 3 · Answer 3 · answered Jul 24 '13 at 09:43

3

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features

http://css3pie.com/

................................................................................

answered Jul 24 '13 at 09:43

Rohit Azad Malik

31,410
17
69
97

score 1 · Answer 4 · answered Jan 09 '14 at 11:10

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. so, you could use css3pie

first check this demo in IE 8 and download it from here write your css rule like this

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

note: added behavior: url(path/to/pie_files/PIE.htc); in the above rule. within url() you need to specify your PIE.htc file location

score 0 · Answer 5 · answered Jul 24 '13 at 09:47

As the answer said above, CSS PIE makes things like border-radius and box-shadow work in IE6-IE8: http://css3pie.com/

That said I have still found things to be somewhat flaky when using PIE and now just accept that people using older browsers aren't going to see rounded corners and dropshadows.

score 0 · Answer 6 · answered Jul 24 '13 at 09:51

HTML:

<div id="myElement">Rounded Corner Box</div>

CSS:

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    behavior: url(PIE.htc);
    border: 1px solid red;

}

PIE.htc file can be downloaded from http://www.css3pie.com

How to apply border radius in IE8 and below IE8 browsers?

6 Answers6

Linked