Why is my email button border is displaying two colors, when the border-color is set to only display one?

Question

As you can see from the picture above, my email button border displays both a greyish and white color when the border-color is set to display a white border. I have posted the code below:

HTML

<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>

SCSS

@mixin border-radius($radius) {
  border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    -webkit-border-radius: $radius;
  background-clip: padding-box;
}

@mixin outline($outline) { 
  outline: $outline;
    -ms-outline: $outline;
    -moz-outline: $outline;
    -o-outline: $outline;
    -webkit-outline: $outline;
}

$bgOverlay: rgba(0,113,188,0.4);
$bgOverlayFull: rgb(0,113,188);
$primaryCopy: rgba(255,255,255,1.0);
$opacityLight: rgba(255,255,255,0.6);
$white: rgba(255,255,255,1.0);

$main-font: Lato, sans-serif;
$header-font: PT+Sans, sans-serif;
$support-font: Monterrat, sans-serif;

$thin: 300;
$regular: 400;
$bold: 700;  

$contentMargin: 18px 0 0 0;

.email {
   margin: $contentMargin;
   margin-bottom: 12px;

   .emailText { 
     @include border-radius(35px);
     @include outline(none);

     background: $bgOverlay;
     border-color: white;
     color: $primaryCopy;
     font-size: 1.6em;
     font-weight: $thin;
     height: 58px;
     padding: 0 0 0 30px;
     width: 61.702127659574%; /* 580px/940px */
   }

   :-ms-input-placeholder{ 
     color: $primaryCopy;
   }
   ::-mox-placehold {
     color: $primaryCopy;
   }
   ::-webkit-input-placeholder {
     color: $primaryCopy;
   }
}

Any help would be greatly appreciated! Thanks

Answer 1

You're running up against the browser's default implementation of borders for input elements.

By default, most browsers will shade the top border darker than the top, so that the input field looks inset into the page, Specifying the foreground color, as border-color does, doesn't override the border-style: inset default. Override that by specifying a solid border, so that the color is uniform:

border-color: white;
border-style: solid;

or less verbosely:

border: solid white;