0

I know that as of IE9 border-radius is available for IE. However, when I apply a border-radius of 50%, in Firefox this shows up as a circle. In IE, it shows up as just a small curved border. Is there a way to achieve the 'circle image' affect in IE? Going into the dev tools for IE reveals that setting the border-radius to any value doesn't produce the circle (it acts as if there is a cap).

Note: I do have 

<!DOCTYPE html>

In the root html page, however this is content injected by angular, so I'm worried that some header in that is what is causing my problem. The start of the injected content is:

<?xml version="1.0" encoding="UTF-8"?><d‌​iv xmlns:atom="w3.org/2005/Atom";  xmlns:dc="purl.org/dc/elements/1.1/"; class="shouts">

Update: Final solution was to switch padding around image to margin (and adjust image size accordingly). For some reason, IE wouldn't use both the padding and the border-radius together.

pasquers
  • 772
  • 1
  • 8
  • 24
  • Are you in Quirks Mode perhaps? Make sure you have a `!DOCTYPE`. IE9 supports `border-radius` perfectly well. – Niet the Dark Absol Aug 15 '16 at 16:29
  • Possible duplicate of [Border Radius Not WORKING in IE9](http://stackoverflow.com/questions/10784999/border-radius-not-working-in-ie9) – Hunter Turner Aug 15 '16 at 16:30
  • I do have In the root html page, however this is content injected by angular, so I'm worried that some header in that is what is causing my problem. The start of the injected content is:
     – pasquers Aug 15 '16 at 16:39
  • @hungerstar fixed hope that helps – pasquers Aug 15 '16 at 16:58
  • Please don't add questions to your questions, especially if they have an answer. If you have a new question, ask a new question. – Heretic Monkey Aug 15 '16 at 17:59

1 Answers1

0

For full circle just use:

border-radius: 1000px;

In some browsers setting border radius to percent is relative to element's width.

skobaljic
  • 9,379
  • 1
  • 25
  • 51
  • That's the point of using a percent for `border-radius`, to have it be `50%`, `25%` etc. of the elements width/height. – hungerstar Aug 15 '16 at 17:21
  • @hungerstar, maybe you should read [this article](http://lea.verou.me/2010/10/the-curious-case-of-border-radius50/). IE9 is an old browser and setting the radius as above (in pixels) makes element looks same in all browsers. – skobaljic Aug 15 '16 at 17:23
  • @skobaljic this didn't fix the problem, it displayed the same as 50% (with only small rounded borders) – pasquers Aug 15 '16 at 17:36
  • What kind of dom element do you apply border-radius? In browser inspector, what are the computed values for css display, width and height? – skobaljic Aug 15 '16 at 18:03