Html 边框半径仅显示表单元素文本的两侧

我制作了一个文本类型的表单元素，希望它的边框半径为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;
}

.文本框{
字体系列：Arial、Helvetica、无衬线字体；
显示：内联块；
垂直对齐：中间对齐；
边界半径：5px；
}

---

请给我一些指导。

您必须为类指定边框以避免阴影效应。

.textBox

 border:1px #ccc solid;

演示