Border-radius shows only two sides in the form element text

Question

I have made a form element of type text and I want it to have border-radius of 5px, but when I write border-radius:5px, it shows the box like this:

Why is it showing a solid border instead of just changing the corners, and why only 2 sides?

My html and css is mentioned below:

<form class="textBoxForm">
<input class="textBox" type="text" value="(123)456-7890" style="width:215px; height:38px; font-size:23px; padding-left:12px;padding-top:0px;color:#666666">
</form>


.textBox{
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
vertical-align:middle;
border-radius:5px;
}

Please guide me about this.

Answer 1

You have to give Border to avoid this shadow effect to the class .textBox

 border:1px #ccc solid;

Demo http://jsfiddle.net/rr6u6rqs/2/