How to add border radius on Quasar table

Question

I'm trying to create a table with header like this

I try with this code, but no luck

    <q-table binary-state-sort
      table-header-class="text-white bg-44b2b8 rounded"
      :data="this.$store.state.apiKeyList"
      :columns="columns"
      :filter="filter"
      row-key="name"
      flat
    >
      <template v-slot:top>
        <q-input debounce="300" color="primary" v-model="filter">
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
    </q-table>

in css file:

.rounded {
    border-radius: 10px 10px 0px 0px;
}

any clue to achieve the rounded header?

Answer 1

Change table-header-class to just class for rounded class and it works

codepen - https://codepen.io/Pratik__007/pen/QWNEwmp