Vuetify: [Feature Request] Border colour prop for outlined v-cards

[Ar4093]

Problem to solve

Right now, it is not easily possible to change the border color of a v-card with the outlined prop.

Proposed solution

Add a prop like border-color (or whatever fits) to v-card that changes the colour of its border.

[Arjun3023]

Any updates on this thread?

[JasonLandbridge]

Yes please!

[byezy]

Yes this would be great

Any workaround? I've tried a scoped style like:

But this didn't work... noting that my CSS skills are very poor... how can a custom border be accomplished at the moment?

[WhiteBookmark]

@byezy

Modifying CSS directly is a bit risky because we have no idea when Vuetify's team will change class names in future.

I use a workaround by placing everything inside alert:

            <v-card>
              <v-alert outlined color="red darken-2">
                  <v-card-title>
                    Colored Card Border
                  </v-card-title>

                <v-card-text>
                  Colored text, you may change alert color  into any you'd like.
                 </v-card-text>
                </v-alert>
              </v-card>

Codepen

[masus04]

Any update on this? The alert workaround does not work for me as it messes up the entire formating, nested inside a dialog, some v-rows and v-cols..

EDIT:
Solved using v-sheet component which seems to not mess with the grid.

...

The padding pa- determines the size of the border.

[hello-andrei]

I have a success with the following work around:

• There is no border built-in property
• Scoped CSS in component didn't work
• Finally, the inline STYLE binding worked, and the sample is below:

---

v-card flat tile width="250" height="250" :style="styleObject"

data() {
return {
styleObject: { background: 'red', border: '3px solid green'}
}
},

[ffxsam]

Adding to @WhiteBookmark's workaround, which is great, I would add class="pa-0" to the alert, as it adds unnecessary padding when being used inside a card.