边框半径仅在表单元素文本中显示两侧

Question

我已经创建了一个文本类型的表单元素，并且我希望它具有5px的边框半径，但是当我写入border-radius：5px时，它会显示框像这样：

为什么会呈现出坚实的边界，而不是只是改变角落，为什么只有2面？

我的HTML和CSS被提到如下：

<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; 
} 

请指引我这件事。

Answer 1

你必须给边境，以避免对本类阴影效果.textBox

border:1px #ccc solid; 

演示http://jsfiddle.net/rr6u6rqs/2/