rounded corner for bottom border using css

I am trying to create rounded corner for border bottom. For example I have a text with underline this underlines should look like rounded corners. I don't want to use Images so I am trying to create via css

Here is my CSS code

.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;
}

Here is my HTML Code

  <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 please see the reference here

It should look like

Solution

Here you go. You need to add a div and give it a border-bottom. I have changed the HTML and CSS below. You can increase the div's height and width as you like

.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>