Cannot add a border-radius to the header of b-table

Describe the bug

I have applied a border-radius: 15px to my b-table, but only to bottom corners are rounded. I have the impression that the top corners are covered by the thead but even if i apply the border-radius to the thead it doesn’t change.

Here is my code VueJs code:

  <b-col id="reportstab_block">
    <b-table :items="reports" :fields="fields" thead-class="thead-block">
    </b-table>
  </b-col>
</template>

And my Sass stylesheet:

#reportstab_block
  .table
    box-shadow: 0px 5px 5px $light_blue;
    border-radius: 15px;
    .thead-block
      background-color: $red
      tr
        th
          color: $light

Here is the result:

Expected behavior

Rounded corners on all the corners of the b-table.

Versions

Libraries:

• BootstrapVue: 2.9.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

• OS: Windows
• Browser: Mozilla Firefox
• Version: 74.0.1

[b0rdjack]

I tried many combinations and got it worked by doing this:

.thead-block
  tr
    th
      background-color: $red
      border: none
      color: $light
    th:first-child
      border-top-left-radius: 15px
    th:last-child
      border-top-right-radius: 15px

Thanks for your help 😃

[tmorehouse]

try targeting your background colors to the <th> cells, or <tr>, perhaps?