CODEWITHSUNDEEP
htmlcssinternet-explorer
wallop
wallop

Reputation: 2581

IE css styling for border radius and background color

When both box shadow and background color exist for a link or button, IE shows a white line around it. Any idea what it is?

There is no other styling apart from what is used below. I checked in debugger tools of IE11 and chrome. It does not happen with outline and background-color, just box-shadow and background-color.

JSFiddle here (To be run on IE, I used IE 10)

enter image description here

//css
a,button {
  background-color: #61C250 !important;
  color: white !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: 0 0 0px 2px #61C250 !important;
  text-decoration: none;
}


//html
<a href="#/random">Random Link</a>
<hr/>
<button>Random Button</button>

Upvotes: 0

Views: 671

Answers (1)

Asons
Asons

Reputation: 87191

IE shows a white line around it. Any idea what it is?

That appears to be a bug in IE, where its anti-alias effect for the elements edge picks up the color from the element behind it.

If you set the body's background to red, the white line becomes red

body { background: red; }
a,button {
  background-color: #61C250 !important;
  color: white !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: 0 0 0px 2px #61C250 !important;
  text-decoration: none;
}
<a href="#/random">Random Link</a>
<hr/>
<button>Random Button</button>

Upvotes: 1

Related Questions