Remove feint border around input (mobile) - html

Question

Hello everybody & anybody who stumbles upon this!
I have ran into an issue where only on mobile devices there appears to be a feint border around my input tags elements. This happens in safari & google chrome on mobile. This does not happen in live server locally. It looks like its trying to create a border-radius: 20px around my input elements but in the css styling for desktop I don't even have that styling applied.
I have tried directly reapplying the desired styling in the mobile media query but everything I have tried has not worked so far.
Thank you in advance!! (p.s really sorry for the way the snippet is compiled, this was written using sass/scss.)
html, body {
font-family: 'mitr', sans-serif;
}
#contact {
background-color: rgba(66, 76, 96, 0.8);
padding: 2rem;
}
#contact .container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#contact .container .contact-title h1 {
color: #a3bfd9;
font-size: 4rem;
font-weight: 600;
text-align: center;
}
#contact .container .contact-title p {
color: #fff;
font-size: 1.5rem;
font-weight: 300;
}
#contact .container .contact-title p a {
color: #a3bfd9;
text-decoration: underline;
}
#contact .container .form form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#contact .container .form form input {
border: none;
border-bottom: 3px #fff solid;
background: transparent;
color: #fff;
margin: 3rem 0;
padding: 0.5rem 0;
width: 600px;
font-size: 1.2rem;
font-weight: 500;
}
#contact .container .form form input::placeholder {
color: #fff;
}
#contact .container .form form input:focus {
outline: none;
}
#contact .container .form form button {
color: #fff;
background-color: #2675a6;
border: none;
border-radius: 50px;
padding: 1.5rem;
width: 250px;
font-size: 1.3rem;
}
#contact .container .form form button i {
position: relative;
margin-right: 0.5rem;
}
#contact .container .form form button:hover {
background-color: #a3bfd9;
color: #283040;
}
<section id="contact">
<div class="container">
<div class="contact-title">
<h1>Lets Chat</h1>
<p>Alternatively, you can reach out to me via Linkedin</p>
</div>
<div class="form">
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" required placeholder="name">
<input type="email" name="email" required placeholder="email">
<input type="text" name="message" required placeholder="message">
<button type="submit"><i class="fas fa-paper-plane"></i>Send</button>
</form>
</div>
</div>
</section>

Answer 1

i fixed it.. really happy I figured it out on my own!! little stuff like this, although trivial make me doubt my skills (i've only been working with html & css for 3 months). super simple, and disappointed that i actual wrote this question up but i won't delete it. i'll leave it up to remind myself to experiment just a little bit more before i ask for help.
changing border-radius: none to border-radius: 0; within my media query fixed it.
.form {
form {
input {
width: 300px;
font-size: 17px;
border-bottom: 3px solid #fff;
border-radius: 0;
}
button {
padding: 1rem;
font-size: 16px;
}
}
}