Как исправить артефакт при использовании border-radius на input?

Question

[madhed]

Браузер - Firefox 45.0.2


HTML

<input type="button" class="blue" name="enter" value="Enter">

CSS

input, select {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  cursor: pointer;
  display: block;
  font-size: 1.5em;
  font-weight: bold;
}
input[type="button"] {
  border-radius: 1.5em;
  margin: 10% auto;
  padding: 2% 1.5em;
  text-transform: uppercase;
  transition: all 0.5s ease-out 0s;
}
input.blue {
  background: #456ae0 none repeat scroll 0 0;
  box-shadow: 0 3px 0 0 #3a5dce;
  color: #fff;
}

Answer 1

[profesor08]

Вам придется смириться и ждать если пофиксят. Либо делать кнопку картинкой.

Answer 2

[iBird Rose]

это баг Firefox. в хроме все нормально. можешь написать им)