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

具体问题现象如下图

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

先清除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;
}

问题点:css设置不生效
分析思路: 从代码来看,多处对input和button进行了设置,在代码执行时,容易造成后面的设置覆盖前面的.
建议:将同类的设置合并到一处来管理.

不知道你这个问题是否已经解决, 如果还没有解决的话:

以下回答由chatgpt基于相关博客总结生成:
这个问题可能是由于页面中有其他CSS样式造成的。首先，检查一下是否有其他地方对input和button标签设置了border属性，可能会覆盖掉你设置的border-radius。如果有的话，可以尝试使用!important来强制使用你的设置，如下所示：
```
input {
    border: none !important;
    border-radius: 10px !important;
}

button {
    border: none !important;
    border-radius: 10px !important;
}
```
如果还是没有效果，可能是有其他CSS样式或者JavaScript代码在影响输入框和按钮的样式。可以使用浏览器的开发者工具来查看具体的CSS样式和排查是否有其他代码影响了样式。在Chrome浏览器中，可以按下F12键打开开发者工具，然后点击Elements选项卡，在右侧的Styles面板中查看元素的CSS样式。
另外，请确保你的代码是写在样式表中（如<style>标签或单独的CSS文件）而不是写在内联样式（如style属性）中，内联样式的优先级比较高，可能会覆盖掉你的设置。
如果以上方法都没有解决问题，可能是由于其他问题导致的，比如CSS框模型、盒子模型等。需要更具体的代码和页面结构来进行分析和解决。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

你的html里输入框的类名不是叫做search f1吗
输入框自带边框，这点在css中不用设置
html输入框input标签下的按钮标签是干嘛的，没看懂，把它删了看一下

2px能看出啥来，设置个20看看