Issue related to google Chrome for Border-Radius - html

Question

I have follwing css class
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
padding: 2px 0;
}
and following html and Java Script:
<input type="text" id="txt1" style="width:300px;" />
<input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>
<script language="javascript">
function validate()
{
if (document.getElementById('txt1').value == '') {
document.getElementById('txt1').style.borderLeft = "5px solid red";
return false;
}
}
</script>
It works in Mozila but in google Chrome whenever validation fires inputbox gets css exctly applied in javascript but it also creates top and bottom border of 1px solid
you can check this example on : http://jsfiddle.net/unloco/VFBT3/3/
how can i solve this issue? Thanks.

Answer 1

Seems to be a bug with border-radius: 3px 3px 3px 3px; and -webkit-border-radius: 3px 3px 3px 3px; If you remove that from the CSS, then there is no issue with Chrome
cf - http://jsfiddle.net/VFBT3/20/

Answer 2

Yeah it seems you have caught some bug.But you can also do this thing like this:
http://jsfiddle.net/VFBT3/46/
CSS
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {border: none;height: 20px;vertical-align: top;}
div{width: 305px;height: 20px;border: 1px solid #CCC;
border-radius: 3px;}
*{margin:0;padding:0;}
HTML:
<form style="margin: 20px;">
<div>
<input type="text" id="txt1" style="width:300px;" />
</div>
<input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>
</form>
JS will be same.