border-radius issue with input type text

Question

I have this issue with <input type="text">where I see some extra border in top and left of the input box.

I have this CSS code -

#add{
      width: 60%;
      height: 25px;
      margin: 0 auto;
      border: auto;
      border-radius: 10px;
    }

I am attaching the screenshot from chrome. Firefox shows the same thing.

Answer 1

Try

    #add{
      width: 60%;
      height: 25px;
      margin: 0 auto;
      border: none; /* <-- This thing here */
      border:solid 1px #ccc;
      border-radius: 10px;
    }

By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.

Demo