Avatars with different border radiuses

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <div class="flex items-center gap-2">
    <Avatar class="rounded-md after:rounded-md">
      <AvatarImage :src="PIXEL" alt="Emma Wilson" class="rounded-md" />
      <AvatarFallback>EW</AvatarFallback>
    </Avatar>
    <Avatar class="rounded-lg after:rounded-lg">
      <AvatarImage :src="PIXEL" alt="Emma Wilson" class="rounded-lg" />
      <AvatarFallback>EW</AvatarFallback>
    </Avatar>
    <Avatar class="rounded-lg after:rounded-xl">
      <AvatarImage :src="PIXEL" alt="Emma Wilson" class="rounded-xl" />
      <AvatarFallback>EW</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Emma Wilson" />
      <AvatarFallback>EW</AvatarFallback>
    </Avatar>
  </div>
</template>