Border-radius CSS Property not working only in Internet explorer 8 | Community
Skip to main content
G
girishk76086569
Level 2
December 14, 2016
Solved

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

  • December 14, 2016
  • 3 replies
  • 7408 views

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);

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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

3 replies

smacdonald2008
smacdonald2008
Level 10
December 14, 2016

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

L
leeasling
Level 8
December 14, 2016

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

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
December 15, 2016

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

Kautuk Sahni
Terms & ConditionsAccessibility statement

Loading footer...