Playground.vue

<template>
  <v-container>
    <div class="pa-6 grey rounded-br"></div>
    <v-row justify="center">
      <v-col
        v-for="value in ['-sm', '', '-lg', '-xl']"
        :key="value"
        cols="12"
        md="2"
      >
        <div
          class="pa-6 text-center grey lighten-2"
          :class="`rounded${value}`"
          v-text="`.rounded${value}`"
        ></div>
      </v-col>
    </v-row>

    <v-row justify="center">
      <v-col
        v-for="value in ['Pill', 'Circle']"
        :key="value"
        cols="12"
        md="2"
      >
        <div
          class="pa-6 text-center grey lighten-2"
          :class="`rounded-${value.toLowerCase()}`"
          v-text="value"
        ></div>
      </v-col>
    </v-row>

    <v-row justify="center">
      <v-col
        cols="12"
        md="2"
      >
        <div
          class="pa-6 text-center grey lighten-2 rounded-0"
          v-text="`.rounded-0`"
        ></div>
      </v-col>
    </v-row>

    <v-row justify="center">
      <v-col
        v-for="value in ['t', 'r', 'b', 'l']"
        :key="value"
        cols="12"
        md="2"
      >
        <div
          class="pa-6 text-center grey lighten-2"
          :class="`rounded-${value}-xl`"
          v-text="`.rounded-${value}-xl`"
        ></div>
      </v-col>
    </v-row>

    <v-row justify="center">
      <v-col
        v-for="value in ['tl', 'tr', 'br', 'bl']"
        :key="value"
        cols="12"
        md="2"
      >
        <div
          class="pa-6 text-center grey lighten-2"
          :class="`rounded-${value}-xl`"
          v-text="`.rounded-${value}-xl`"
        ></div>
      </v-col>
    </v-row>

    <div class="my-12"></div>

    <v-row justify="center">
      <v-hover
        v-for="n in 2"
        :key="n"
      >
        <template v-slot="{ hover }">
          <v-sheet
            :class="[
              `rounded-${hover ? 'xl' : '0'}`,
              hover && n === 2 ? 'mt-n2' : undefined,
            ]"
            :elevation="hover ? 24 : 2"
            class="pa-4 transition-swing"
            height="256"
            width="256"
          >
            Hello
          </v-sheet>
        </template>
      </v-hover>
    </v-row>
  </v-container>
</template>