Tạo hình ảnh tròn (circled image) với CSS

Hình ảnh tròn hoàn hảo với border-radius: 50%

Để tạo ảnh tròn, dùng border-radius: 50% trên element **vuông (width = height)**. Nếu ảnh chữ nhật, kết quả là elip - cần `object-fit: cover` + container vuông.

Ví dụ cơ bản (Ảnh đã vuông)

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      border-radius: 50%;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <h2>Coding Ground</h2>
  <img src="coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>

Best Practice: Avatar tròn từ ảnh bất kỳ tỷ lệ

<!DOCTYPE html>
<html>
<head>
  <style>
    .avatar {
      width: 120px;
      height: 120px;            /* Bắt buộc: width = height */
      border-radius: 50%;
      object-fit: cover;        /* Crop ảnh vừa khung tròn */
      border: 3px solid #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    /* Hoặc dùng container */
    .avatar-wrapper {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .avatar-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  </style>
</head>
<body>
  <!-- Cách 1: Trực tiếp trên img -->
  <img class="avatar" src="rectangular-photo.jpg" alt="Avatar">

  <!-- Cách 2: Wrapper (linh hoạt hơn) -->
  <div class="avatar-wrapper">
    <img src="rectangular-photo.jpg" alt="Avatar">
  </div>
</body>
</html>

Tại sao cần object-fit: cover?

Các biến thể hình tròn

/ * Viền gradient * /
.avatar-gradient {
  border: 3px solid transparent;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  border-radius: 50%;
}

/* Ring loader */
.loader-ring {
  width: 50px; height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

Lưu ý

• Luôn set `width` = `height` rõ ràng (px hoặc aspect-ratio).
• Dùng `aspect-ratio: 1/1` (CSS hiện đại) thay vì set cả 2.
• Container wrapper linh hoạt hơn cho việc đổi ảnh, thêm badge, ring.