CODEWITHSUNDEEP
cssinternet-explorer
Sailor
Sailor

Reputation: 91

Why do I get a faint border around css circles in Internet Explorer?

I have a div with a 50% radius and equal heights and widths. It has a border that is the same color as the background of the parent element. Outside of this border there's a thin outline of div background color that kinda looks like anti-aliasing.

Why does this happen? It seems to be present in all versions of IE.

CodePen: http://codepen.io/anon/pen/LVMwxR

<body>
    <div id="inner"></div>  
</body>

and CSS: 

#inner {
    border-radius: 50%;
    border: 40px solid white;
    background: red;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
}

body {
    background: white;
}

Upvotes: 2

Views: 1320

Answers (1)

Paulie_D
Paulie_D

Reputation: 115293

I can't offer an immediate solution using border but an alternative is to use a box-shadow instead.

* {
  box-sizing: border-box;
}

#inner {
  border-radius: 50%;
  box-shadow: 0 0 0 40px white;
  background: red;
  width: 20rem;
  height: 20rem;
  margin: 40px auto;
}

body {
  background: lightblue;
}
 <div id="inner"></div>

Note: A box-shadow doesn't add dimension to your element so it's not an absolute replacement.

Upvotes: 1

Related Questions