How to get rid of text form borders in Chrome and Firefox?

I have created some text forms in my HTML and CSS and they appear to be working just fine in Safari, but in Firefox and Chrome they have what looks to be a 1 to 2px white border around them. Is this a default for that browser styling? How do i get rid of it?

Here is my CSS just for reference....

.forms input[type="text"] {
display:block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#3a3a3a;
color: white;
padding-right:30px;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:540px;
}
.shortForms input[type="text"] {
display:inline-block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#3a3a3a;
color: white;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:242px; 
}

It is a page with a black background and the text fields are a light shade of grey with white placeholder text.

Thanks in advance for your help!