Border-radius CSS Property not working only in Internet explorer 8

[girishk76086569]

Hi All,

We are using the border-radius css property to appear the item as circle,It is working fine in Chrome and firefox , But displaying square box in Internet Explorer instead of circle . I have tried adding the following ways of properties , But still it is showing the square box instead of circle.

border-radius: 13px !important;

border-radius: 13px;

 border-top-left-radius:13px;
border-top-right-radius:13px;
border-bottom-left-radius:13px;
border-bottom-right-radius:13px;

behavior: url(border-radius.htc);

[smacdonald2008]

This is not really an AEM issue - more of a CSS/Browser issue. See: 

http://stackoverflow.com/questions/17830372/how-to-apply-border-radius-in-ie8-and-below-ie8-browsers

[leeasling]

Wow, people still use IE8?  That's insane.  But yeah, Scott is right, it's not an AEM issue.

[kautuk_sahni · Accepted solution]

Hi 

It is very common problem with internet explorer 8 and below.

This is not an issue from AEM side, but please have a look at these following posts to get answer to your problem:

Link:- http://www.hongkiat.com/blog/css3-border-radius-in-internet-explorer/

Link:- http://stackoverflow.com/questions/17830372/how-to-apply-border-radius-in-ie8-and-below-ie8-browsers

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

    Option 1

    http://jquery.malsup.com/corner/

    Option 2

    http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

    Option 3

    http://css3pie.com/

    Option 4

    http://www.netzgesta.de/corner/

border-radius is 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.

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features Link:- http://css3pie.com/

I hope this would help you.

~kautuk