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: ``` .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; } ``` ```

Accepted Answer

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

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

Solution

Problem