Vue.js - Vuetify how to get rounded corners on cards?
v-card
has rounded corners by default. It does not provide a prop named round
to make it have more rounded corners.
If you want to have more rounded corners as compared to the default then add a custom css class to v-card
<v-card class="rounded-card">
css
.rounded-card{
border-radius:50px;
}
Here is a codepen
I would like to update Vamsi Krishna's answer. Vuetify now provides since v2.3 border utilities to quickly style the border-radius of any element.
To minimize custom CSS and make your Vue app more consitent, you may now use .rounded-xs
, .rounded
, .rounded-lg
or .rounded-xl
classes as specified in the docs:
<v-card class="rounded-lg">