Tạo hình ảnh bo góc (rounded image) với CSS

Thuộc tính border-radius cho hình ảnh

Để bo góc hình ảnh, sử dụng thuộc tính border-radius. Giá trị có thể là px, %, em, rem. Áp dụng trực tiếp lên `` hoặc container.

Cú pháp

img {
  border-radius: <length> | <percentage>;
/* Ví dụ: */
  border-radius: 20px;      /* Bo góc 20px */
  border-radius: 50%;       /* Tròn tròn (hình vuông) / ellipse (hình chữ nhật) */
  border-radius: 10px 20px 30px 40px; /* 4 góc: top-left, top-right, bottom-right, bottom-left */
}

Ví dụ cơ bản

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

Các mẫu bo góc phổ biến

Mẫu	CSS	Kết quả
Bo đều	`border-radius: 10px;`	4 góc cong đều
Bo 2 góc trên	`border-radius: 10px 10px 0 0;`	Card header style
Bo 1 góc	`border-radius: 0 0 0 20px;`	Góc dưới trái
Hình tròn (avatar)	`border-radius: 50%; aspect-ratio: 1/1;`	Tròn hoàn hảo nếu vuông
Hình elip	`border-radius: 50%;`	Elip nếu ảnh chữ nhật
Pill/Tag	`border-radius: 9999px; / 50px;`	Hai đầu bán tròn

Lưu ý quan trọng

border-radius cắt phần nội dung (content box) - ảnh có thể bị cắt nếu không có padding.
Dùng overflow: hidden trên container nếu ảnh lớn hơn container.
Kết hợp object-fit: cover cho avatar tròn từ ảnh chữ nhật.
box-shadow tuân theo bo góc (khác với border).

Avatar tròn hoàn hảo (Best Practice)

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;      /* Crop ảnh vừa khung tròn */
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}