Input with bottom border only looks weird on mobile

Question

Trying to get only bottom border on mobile and get some strange line instead on mobile browswer:

Expecting a straight line(works on the mac not on the iPhone). CSS is

  outline:0 !important;
  outline-width: 0;
  border:none;
  border-width: 0px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgb(54,71,112);

Answer 1

On mobile I solved this only with :

  border-radius: 0;