圆角到按钮的内边距答案

【问题标题】：To have rounded corners to the inner margin of a button圆角到按钮的内边距
【发布时间】：2017-08-03 23:45:52
【问题描述】：

我有一个带有圆角边框的引导按钮。我也想在边框圆角内制作按钮的内部而不是矩形。

这是我的Fiddle。基本上我希望内部边框与外部黑色边框相似，而不是矩形。

HTML：

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

CSS：

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited 
{
background-color: #00A0AF !important;
background: linear-gradient(#00A0AF, #00ffff);
}
.btn-primary {
border: 5px solid #000000;
color: #000000;
}

【问题讨论】：

椭圆是指圆角吗？
@G.Hunt 是的，圆角是合适的。我想要黑色边框的内边框上的圆角类似于外边框的圆角。已相应地编辑了我的问题。
有趣的是，您的黑色边框如何在<> sn-p 中消失，除非我添加 !important 到边框......
@mplungjan 是的，我也不确定发生了什么。我尝试使用 SO 提供的 sn-p 选项，但它不能像小提琴一样工作，所以继续放置小提琴链接。

标签： html css twitter-bootstrap

【解决方案1】：

css border-radius 属性是你想要的。

将border-radius: 10px; 添加到.btn-primary 类即可。

演示here.

【讨论】：

我很好奇为什么黑色边框不会出现在 sn-ps 中的 SO 上，除非我添加 !important:.btn-primary { border: 5px solid #000000 !important; color: #000000; border-radius: 10px !important; }