VuetifyJS: how to get rid of the v-stepper component elevation?

Question

When using the v-stepper component in Vuetify, there is a default border like shape that appears on the edges:

I want to remove it. I tried to set the elevation to 0 but it did not work.

<v-stepper v-model="e1" class="elevation-{0}">

Codepen

How to achieve this?

Answer 1

Not elevation-{0}, but elevation-0.
Elevation docs:

You can set an element's elevation by using the class elevation-{n}, where n is a integer between 0-24 corresponding to the desired elevation.

So actually you need to remove parentheses as well.
Should be clear because you can't use parentheses in class names as far as I know.

Answer 2

just put the following

<v-stepper v-model="e1" class="elevation-0">

Answer 3

Adding some CSS works (at least w/ your pen):

.v-stepper__header {
  box-shadow: none;
} 

Answer 4

<v-stepper v-model="e1" flat> for removing round edges and

.v-stepper__header {
  box-shadow: none;
}

to remove header shadow