Border-radius仅在表单元素文本中显示两个边

Question

我创建了一个text类型的表单元素，我希望它的border-radius为5px，但是当我写border-radius：5px时，它会显示如下的框：

为什么它显示的是实心边框而不仅仅是改变角落，为什么只有两个边？

我的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

你必须让Border避免对类.textBox

的阴影效果

 border:1px #ccc solid;

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