border-radius creates an outline in IE

Question

When border-radius is applied to a coloured div that has a white border, the background color appears outside the white border in corners. Why is this happening in ie? (Tried ie9 and ie10).

<div class="rounded"></div>

.rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #f00;
    width: 100px;
    height: 100px;
}

body {
    background-color: #fff;
}

The thing here is that I really need the white border, so removing it or making it transparent, as some have proposed, is not an option. Here is a fiddle: http://jsfiddle.net/z0rt63e2/1/

can you show us a jsfiddle or a link to the page or something? so that we can see what exaclty it is looking like? — Sai, Oct 20 '14 at 14:57
No one will probably know *why* this is happening, but it's a good catch and you should notify the [IE dev team](https://connect.microsoft.com/ie/) about it. [Note](http://jsfiddle.net/z0rt63e2/5/) also that the same happens when using an inset box-shadow. — Bram Vanroy, Oct 20 '14 at 15:09
I don't have IE to test, but have you tried `background-clip: content-box`? — disinfor, Oct 20 '14 at 15:27

score 9 · Accepted Answer · answered Oct 20 '14 at 20:54

9

As in my comment above (in the interest of having an answer), use background-clip: content-box in your .rounded class.

Here's some reading material: http://www.css3.info/preview/background-origin-and-background-clip/

answered Oct 20 '14 at 20:54

disinfor

10,865
2
33
44

1

Not content-box but padding-box did the trick. You were so close, so I accept your answer. Thanks! – tofu Oct 21 '14 at 09:56
@tofu Awesome! I'm glad you got it to work. I remember running into the same problem you had a couple years ago and `content-box` is what did it for me. – disinfor Oct 21 '14 at 17:02

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

according to this post... Removing the image border in Chrome/IE9

try,

 border-style:none;

mayb this helps?

UPDATE:: I found this link .. http://css-tricks.com/removing-the-dotted-outline/

and according to it(allthe way down at the bottom) we have to add the meta tag..

<meta http-equiv="X-UA-Compatible" content="IE=9" />

IE=edge should work and use the latest rendering engine..

edited May 23 '17 at 12:14

Community

1
1

answered Oct 20 '14 at 15:12

Sai

1,889
5
18
26

border-radius creates an outline in IE

2 Answers2

Linked