CSS样式：input和button设置border-radius不生效，产生小节点

Question

具体问题现象如下图

问题描述：我给input和button设置border-radius时都出现了下列图片中的问题，因为要求设置圆角边框，但是没有生效，而且对应地方生成了小节点，请教下各位这个问题怎么解决？具体代码已截图如下

Answer 1

先清除input和button的边框，再设置

.search input {
    border: none;
    border-top: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    border-radius: 2px;
}
.search button {
    border: none;
    border-top: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
}