Anti-aliasing CSS Input Top Border

Asked Apr 28 '21 at 14:37

Active Apr 28 '21 at 15:02

Viewed 37 times

I am not sure if I use the right word "anti-aliasing" here. Please refer to below CSS and images gathered from laptop web browser and iPhone mobile browser.

input {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 0.8rem 0.7rem;
  color: gray;
}

Btw Android mobile browser working fine.

This is from laptop web browser. Top border is sharp

This is from iPhone mobile web browser. Top border isn't sharp

edited Apr 28 '21 at 15:02

asked Apr 28 '21 at 14:37

Aman Perdana 2008

Looks like a `box-shadow`. Did you try `box-shadow: none`? – Mr T Apr 28 '21 at 14:52
I added box-shadow: none, no impact. – Aman Perdana 2008 Apr 28 '21 at 15:02

Anti-aliasing CSS Input Top Border

0 Answers0