Border style is not working in Internet explorer 11

Question

I have created a toggle-button that is not working in the IE-browser. I have doubts regarding the web-kit appearance and the border.

Here is a working snippet of my code:

 .contain { position: relative; display: inline-block; width: 48px; height: 24px; background: #d6d6d6; border-radius: 20px; margin: 10px; } .checkbox { position: absolute; width: 28px; height: 28px; -webkit-appearance: none; background: white; border: 1px solid; border-radius: 50%; top: -5px; left: -10px; outline: none; } .checkbox:checked { left: 20px; } 

  <label class="contain" > <input type="checkbox" id="checkbox" class="checkbox" /> </label> 

The border is fine in Chrome but in the Internet-Explorer the border-radius is not applied.

Answer 1

It appears that the problem is with the .checkbox element, you haven't specified a border color for it which might be why you aren't seeing the border.

You could add it at the end of the border property, like this:

.checkbox {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -5px;
  left: -10px;
  -webkit-appearance: none;
  border: 1px solid red;
  border-radius: 50%;
  outline: none;
  background: white
}

Or you could split the border property into border-width , border-style and border-color properties, like this:

.checkbox {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -5px;
  left: -10px;
  -webkit-appearance: none;
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-radius: 50%;
  outline: none;
  background: white
}

Another thing you could try to do is make the border thicker, by changing the border's width ( 1px ) to 2px / 3px .

Good luck.

Answer 2

just add

-moz-border-radius: 50%;
-webkit-border-radius: 50%;

to the checkbox class