Bootstrap panel corners with custom color

Question

I am trying to make a panel with a custom color. This case color orange. As can be seen in this example, the bottom corners are not colored.

HTML

<div class="col-md-6">
<div class="panel color-orange">
<div class="panel-heading text-white text-center">
  text
</div>
<div class="panel-body color-white">
<div class="col-md-8" style="height:200px">
    SignUp to the system
 </div>
 <div class="col-md-4" style="height:100px">
      SignUp to the system
 </div>
 <div class="col-md-4" style="height:100px">
      SignUp to the system
 </div>
 </div>
 </div>
 </div>


CSS

.color-orange {
 background: #fa7921;
 }

.color-white {
 background: white;
 }

Does anyone know how I can solve this?

Thank you in advance!

Answer 1

add a border to the entire panel.

<div class="col-md-6">
  <div class="panel color-orange">
    <div class="panel-heading text-white text-center">
      text
    </div>
    <div class="panel-body color-white border-orange">
      <div class="col-md-8" style="height:200px">
        SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
    </div>
  </div>
</div>

and in the css

.color-orange {
  background: #fa7921;
  // new border style
  border: solid 1px #fa7921;
}

.color-white {
  background: white;
}