CSS border property, strange behaviour

Question

I am modifying the styling of my text field inputs for a contact form I have. My desired styling is a bottom border only, which seems to work in chrome but not on Safari for mobile, the whole border remains visible. See the below images for reference.

Chrome Version 91.0.4472.114 (MacOS)

Chrome works and looks fine.

Safari iOS 14.6

Here on my mobile, it is hard to see via the screenshot be some of the top corners of the border are visible, and the bottom border curves around.

css

export const TextField = styled.input`
   width: 100%;
   background: #131d32;
   border: none;
   border-bottom: 1px solid rgba(200, 200, 200, 0.7);
   min-height: 35px;
   color: white;
   outline: 0;
   border-width: 0 0 2px;
   :focus {
       border-width: 0 0 1px;
   }`;

Check this answer: https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding — sitharthan, Jun 29 '21 at 10:52
@sitharthan that worked - apologies if this is now a duplicate question. — james, Jun 29 '21 at 10:58

score 0 · Answer 1 · answered Jun 29 '21 at 11:09

Please set border-radius as 0;

export const TextField = styled.input`
   width: 100%;
   background: #131d32;
   border: none;
   border-bottom: 1px solid rgba(200, 200, 200, 0.7);
   min-height: 35px;
   color: white;
   outline: 0;
   border-width: 0 0 2px;
   border-radius: 0;
   :focus {
       border-width: 0 0 1px;
   }`;

CSS border property, strange behaviour

1 Answers1