底部边框的圆角使用 css

Question

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

in Current scneario rounded corner not coming as rounded corner see the reference here

它应该看起来像

Answer 1

给你。您需要添加一个 div 并给它一个 border-bottom。我已经更改了下面的 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>

底部边框的圆角使用 css

rounded corner for bottom border using css

html

css

rounded-corners