title: Input Text top and left border have a different border color
body: <p>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.</p>
  
  <p>this is the image<img src="https://i.stack.imgur.com/ykp9o.png" alt="enter image description here"></p>
  
  <p>this is my css:</p>
  
  <pre><code>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;
  }
  </code></pre>