border-radius issue with input type text

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

Border auto is doing that for you. So have your own defined border style.

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