Q:

How to make the v-card with image become circle?

I want to make the card from a square shape to circle shape 'O' 
I have try css change the radius but still not work 
<v-hover v-slot:default="{ hover }">

<v-card :elevation="hover ? 5 : 2" id="rounded-card">
  <v-img  src="image.jpg" height="300"></v-img>
     <v-fade-transition>
          <v-overlay
            v-if="hover"
            absolute
             style="z-index: 0"
          >
            <h1>Circle Card</h1>
          </v-overlay>
        </v-fade-transition>       
  </v-card>
  </v-hover>

#rounded-card{
    border-radius: 0px;
}

I just want the card to become circle shape.

A:

Change the border-radius to 50% and make sure your element is a square.
#rounded-card {
  border-radius: 50%; 
  min-height: 500px;
  min-width: 500px;
}

See https://codepen.io/reijnemans/pen/KKPqprL

