如何使用CSS实现按钮圆角效果，附现有代码求助

要实现按钮圆角效果，只需给按钮元素添加border-radius属性即可，可选择以下两种常用实现方式：

• 方式1：添加内联样式（快速调试用）
  直接在现有button标签上添加style属性设置圆角，完整示例代码如下：

<button class="btn input-button" style="border-radius: 8px;">
  <span class="badge badge-primary badge-pill" style="margin-left: 138px; background: #434190;">
    <i class="fa fa-paper-plane fa-lg" style="color: #ffff; margin-left: 4px;"></i>
  </span>
</button>

• border-radius属性值可按需调整：
  • 普通圆角效果设置为4px~12px即可
  • 需要胶囊型圆角按钮可设置为999px
  • 若按钮宽高一致，设置为50%即可得到完全圆形的按钮

• 方式2：在CSS样式表中统一设置（推荐正式环境使用）
  给按钮对应的类添加样式规则，后续所有带该类的按钮都会自动生效：

.input-button {
  border-radius: 8px;
  /* 可选配置：去掉默认边框、调整内边距让样式更协调 */
  border: none;
  padding: 6px 12px;
}

额外提示：从代码里的badge类判断你大概率已经引入了Bootstrap框架，这种场景下不需要额外写CSS，直接给button标签加rounded类即可快速实现默认圆角，加rounded-pill类实现胶囊型圆角。

内容的提问来源于stack exchange，提问作者Daniel. F