Textarea border color not changing completely

Question

I'm trying to make the border gray, and for some reason only 2 "edges" / half of the box of the <input type="text"> are gray while the <textarea> border is fine.

Any idea why is this happening? both have the same class .fill-form-style

.fill-form-font {        
    padding: 8px;
    border-radius: 20px;
    border-color: gray;
    outline: none;
    font-size: 16px;
}

And this is the HTML of the input and textarea:

<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font">
<textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>

Answer 1

Use border-style:solid; This will stop the border from being the two different colours.

JSFiddle

Thanks to some messing around (and Paulie_D in comments [Thanks!]) I found out it's because of the inset border style.

You can also use shorthand border which then means you have less lines in your css.

border:1px solid #f00;

Here's a working snippet:

 .fill-form-font{ padding: 8px; border-radius: 20px; border-color: red; border-style:solid; outline: none; font-size: 16px; } 

 <input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font" > <textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea> 

Answer 2

That's because of User Agent Style . You need to use border to override the user agent border. Example:

 .fill-form-font { padding: 8px; border-radius: 20px; border: 1px solid gray; outline: none; font-size: 16px; } 

 <input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font"> <textarea name="content" cols="60" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea> 

Answer 3

Solution...

.fill-form-font{        
    padding: 8px;
    border-radius: 20px;
    border: 1px solid gray;
    outline: none;
    font-size: 16px;
}

https://jsfiddle.net/ew2orox0/ live example

Answer 4

By default, browser users border-style: inset; and you should change it to use border-style: solid . You could just add that property or use the border definition in just one line: border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */ border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */