How to change the bottom border color of a Vuetify v-overflow-btn?

Question

I'm actually building a website in nuxt.js using Vuetify. I have created a menu based on one v-overflow-btn, one v-text-field and one v-btn. Here is what my menu looks like actually.

Cause I'm a little bit maniac, I would like to change the bottom border color of my v-overflow-btn to match all the different dividers color bar of my menu. By default, the color is black.

I already tried to define my own CSS in the style section as below:

<style>
  v-overflow-btn {
    border-color:grey !important;
  }
</style>

But nothing changes...

Could someone behelp me to change this border color? Thanks in advance :)

Answer 1

Try this

<style>
  .v-overflow-btn .v-input__slot::before {
    border-color: grey !important;
  }
</style>

Answer 2

I had to add the deep selector in case someone else is having this issue.

.nbb >>> .v-input__slot:before  {
  border-color: white !important;
}