Css 具有边框底部和边框半径的按钮不是预期结果

以下是我想要实现的目标：

如您所见，底部有一个小边框，我尝试添加

边框底部：1px solid#c1ad6f

，但结果是：

由于半径的原因，边框未完全填充

.btn{
背景：#d5c289；
边框底部：6px实心#c1ad6f；
字号：500；
字体大小：1.125rem；
填充：1.25rem；
边界半径：4px；
}

---

<代码> <代码> > P> >您可以考虑<代码>框阴影>代码>而不是边框，以更好的方式实现：

.box{
显示：内联块；
利润率：10px；
高度：100px；
宽度：200px；
背景：#d5c289；
框大小：边框框；
边界半径：0 0 20px 20px；
}
.影子{
盒影：0-10px0#c1ad6f插页；
动画：动画2无限线性交替；
}
.边界{
边框底部：10px实心#c1ad6f；
动画：动画alt 2s无限线性交替；
}
@动画关键帧{
从{box shadow:0-1px 0 0#c1ad6f inset；}
到{box shadow:0-30px 0 0#c1ad6f inset；}}
@动画alt的关键帧{
从{边框底部：1px实心#c1ad6f；}
至{边框底部：30px实心#c1ad6f；}}

有方块阴影的很好
边界不好

@AlexanderKim，您可以增加底部边框。如下所示：边框底部：5px实心#c1ad6f；。我制作了这个提琴：jsfiddle.net/bektkdnz，但是增加了填充，所以更容易看到

这是一个简单的技巧，可以使用框阴影使边框变圆。会的 准确地给出您想要的输出

.btn边框{
背景#17aa56；
颜色：#fff；
边界半径：15px；
盒影：0 10px#119e4d；
填充：25px 60px 25px 90px；
}
.btn块{
边界：无；
字体家族：继承；
字体大小：继承；
颜色：继承；
背景：ddd；
光标：指针；
填充：25px 80px；
显示：内联块；
利润率：15px 30px；
文本转换：大写；
字母间距：1px；
字号：700；
位置：相对位置；
溢出：隐藏；
}

---

底部圆形按钮

请分享您的代码……我已经发布了我的单行代码，都是一样的简单。仔细听我说，当前CSS的问题几乎看不出来。@AlexanderKim，您可以增加底部边框。如下所示：

border-bottom:5px-solid#c1ad6f。我做了这个提琴：但是增加了填充，所以更容易看。@user2796515，谢谢，我跳到了
6px
，所以每个人都能清楚地看到：我怀疑，我没有使用正确的工具，你能解释一下为什么用边框它会被剥离吗？半径开始时，它正在吞噬边界。@AlexanderKim我想说边界是这样工作的：）顺便说一下，它们都取决于它们的宽度和边界半径，因为你可能会得到你想要的values@AlexanderKim我用一些动画进行了更新，这样您可以更好地看到结果；）谢谢现在我明白了。