Upon examining the image above, it is clear that my email button border shows a mixture of grey and white colors when the border-color property is set to display as white. The code snippet below illustrates this:
.email {
margin: 18px 0 0 0;
margin-bottom: 12px;
}
.email .emailText {
border-radius: 35px;
-ms-border-radius: 35px;
-moz-border-radius: 35px;
-o-border-radius: 35px;
-webkit-border-radius: 35px;
background-clip: padding-box;
outline: none;
-ms-outline: none;
-moz-outline: none;
-o-outline: none;
-webkit-outline: none;
background: rgba(0, 113, 188, 0.4);
border-color: white;
color: white;
font-size: 1.6em;
font-weight: 300;
height: 58px;
padding: 0 0 0 30px;
width: 61.7021276596%;
/* 580px/940px */
}
.email :-ms-input-placeholder {
color: white;
}
.email ::-mox-placehold {
color: white;
}
.email ::-webkit-input-placeholder {
color: white;
}
<div class="email">
<form action="#" class="emailBox" target="_blank" method="post">
<input type="email" class="emailText" placeholder="enter email for early access" size="">
</form>
</div>