使用css的底部边框圆角[重复]答案

【问题标题】：rounded corner for bottom border using css [duplicate]使用css的底部边框圆角[重复]
【发布时间】：2021-11-13 08:15:00
【问题描述】：

我正在尝试为边框底部创建圆角。例如，我有一个带下划线的文本，这个下划线应该看起来像圆角。我不想使用图片，所以我尝试通过 css 创建

这是我的 CSS 代码

.footer_line {
    white-space: nowrap;
    margin-top: 12px;
    font-weight: bold;
    border-bottom: 4px solid #2782dd;
    padding-bottom: 1px;
    font-size: 36px;
    width: 150px;
    border-radius: 4px !important;
 }

 .news_let {
    margin-left: 0px !important;
    margin-top: 37px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    color: white !important;
    font-size: 21px !important;
    border-bottom: 2px solid #2782dd !important;
    padding-bottom: 6px !important;
}

这是我的 HTML 代码

  <div class="col-md-6">
       <h3 class="news_let footer_line">News Letter</h3><br/>
  </div>

在当前场景中的圆角不是圆角，请在此处查看参考

应该是这样的

【问题讨论】：

你能举例说明它应该是什么样子吗？因为我可以看到边界半径所以不确定
@Tushar 感谢我添加图片的 cmets
@Mr.M，谢谢我已经回答了

标签： html css rounded-corners

【解决方案1】：

给你。您需要添加一个 div 并给它一个边框底部。我已经更改了下面的 HTML 和 CSS。你可以随意增加div的高度和宽度

.footer_line {
  white-space: nowrap;
  margin-top: 12px;
  font-weight: bold;
  padding-bottom: 1px;
  font-size: 36px;
  width: 150px;
  border-radius: 4px !important;
}

.news_let {
  margin-left: 0px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  color: white !important;
  font-size: 21px !important;
  border-bottom: 4px solid #2782dd !important;
  border-radius:4px;
}

<div class="col-md-6">
  <h3 class="footer_line">News Letter
    <div class="news_let"></div>
  </h3><br/>
</div>

【讨论】：