Avatar Rounded

                    <section class="flex items-center justify-center p-8 gap-6">
  <div class="avatar">
    <div class="w-24 rounded">
      <img src="https://i.pravatar.cc/300?img=7" alt="Square avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded-lg">
      <img src="https://i.pravatar.cc/300?img=8" alt="Rounded avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded-xl">
      <img src="https://i.pravatar.cc/300?img=9" alt="More rounded avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded-full">
      <img src="https://i.pravatar.cc/300?img=10" alt="Circular avatar" />
    </div>
  </div>
</section>

<style>
  .avatar {
    position: relative;
    display: inline-flex;
  }
  
  .avatar > div {
    display: block;
    overflow: hidden;
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>