Geek Answers Handbook

Border-radius creates an outline in IE

When a border radius is applied to a color div with a white border, the background color appears outside the white border at the corners. Why is this happening? (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 fact is that I really need a white frame, so removing it or its transparency, as some have suggested, is not an option. Here is the fiddle: http://jsfiddle.net/z0rt63e2/1/

+4
source share
3 answers

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

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

+6

border-color: transparent

.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;
    border-color: transparent;/*Add border color transparent*/
}
body {
    background-color: #fff;
}
<div class="rounded"></div>
Hide result
0

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

to try

 border-style:none;

mayb does this help?

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

and according to it (all the way down below) we have to add a meta tag.

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

IE = Edge should work and use the latest rendering mechanism.

0
source

More articles:


All Articles