Input Text top and left border have a different border color

Question

Heyy there, I have this text field I would like it to have a simpler border, but the left and top borders have a different(darker) color than the one I'm assigning them to be. I have been trying alot of different attributes in my CSS file.

this is the image

this is my css:

div#search_area input[type=text]{
    width: 179px;
    height: 23px;
    background: -webkit-gradient(linear, left top, left bottom, from (#ffffff), to (#f5f5f5));
    background: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
    background: -moz-linear-gradient(top, #ffffff, #f5f5f5);
    background: -ms-linear-gradient(top, #ffffff, #f5f5f5);
    background: -o-linear-gradient(top, #ffffff, #f5f5f5);
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
    border-color: rgb(228,229,228);
    color: rgb(120,123,122);
    font-size: 13px;
    font-family: Arial, serif;
    text-decoration: none;
    vertical-align: middle;
    padding: 0px 0px 0px 0px;
}

Answer 1

you need to also add

border-style: solid;

or dashed, or dotted, whichever one you want

Answer 2

This is because your border-style is most likely set to inset. If you change it to a different style, it won't create the "3D" effect that is causing the two different colors. See here for more details on border-style https://developer.mozilla.org/en-US/docs/Web/CSS/border-style