Как добавить нижнюю границу к v-табам Vuetify?

Я хотел бы добиться следующего результата:

Я сделал это, сделав это

<v-tabs>
  <v-tab
    v-for = "(tab, i) in tabs"
    :key = "i"
    v-bind = "tab"
  ></v-tab>
</v-tabs>
<v-divider></v-divider>

Но я не хочу использовать <v-divider>, я бы хотел получить тот же внешний вид с помощью CSS. Я попробовал это

<template>
  <v-tabs class = "bordered-tab">
    <v-tab
      v-for = "(tab, i) in tabs"
      :key = "i"
      v-bind = "tab"
    ></v-tab>
  </v-tabs>
</template>

<style scoped>
.bordered-tab {
  border-bottom: 1px solid red;
}
</style>

И это результат

Синяя рамка должна находиться поверх красной. Как мне это сделать?

Редактировать №1

Благодаря инсайтам @kissu я смог достичь своей цели. Это полный код:

<template>
  <v-tabs class = "bordered-tabs">
    <v-tab
      v-for = "(tab, i) in tabs"
      :key = "i"
      v-bind = "tab"
    ></v-tab>
  </v-tabs>
</template>

<style scoped>
.bordered-tabs >>> .v-slide-group__content {
  border-bottom: 1px solid #0000001e;
}
</style>

Еще я хотел бы применить этот стиль ко всем .v-slide-group__content без необходимости явного добавления к ним класса, что-то вроде:

.v-slide-group__content {
  border-bottom: 1px solid #0000001e;
}

Как мне это сделать?

Редактировать №2

Поскольку я хотел применить приведенный выше класс только к горизонтальным <v-tabs>, я написал следующее правило в своем файле main.css.

.v-tabs:not(.v-tabs--vertical) .v-slide-group__content {
  border-bottom: 1px solid #0000001e;
}

С этим правилом

<!-- border-bottom will be applied -->
<v-tabs>
  <!-- tabs... -->
</v-tab>

<!-- border-bottom will not be applied -->
<v-tabs direction = "vertical">
  <!-- tabs... -->
</v-tabs>