Tạo góc bo tròn (Rounded Corners) với CSS3 border-radius

Thuộc tính border-radius tạo góc bo tròn cho element. Hỗ trợ 1-4 giá trị cho 4 góc, và slash syntax cho elip.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
  .box {
    display: inline-block;
    width: 200px; height: 200px;
    margin: 20px;
    text-align: center;
    font-size: 18px;
    color: white;
    display: flex; align-items: center; justify-content: center;
    border: 4px solid green;
  }
  .rounded { border-radius: 24px; background: #27ae60; }
  .normal { background: #27ae60; margin-left: 20px; }
  
  /* Các biến thể */
  .radius-tl { border-radius: 30px 0 0 0; background: #3498db; }      /* Top-left */
  .radius-tr { border-radius: 0 30px 0 0; background: #9b59b6; }      /* Top-right */
  .radius-br { border-radius: 0 0 30px 0; background: #e74c3c; }      /* Bottom-right */
  .radius-bl { border-radius: 0 0 0 30px; background: #f39c12; }      /* Bottom-left */
  .radius-tlbr { border-radius: 30px 0 30px 0; background: #1abc9c; } /* Top-left + Bottom-right */
  .radius-elliptical { border-radius: 50px / 20px; background: #34495e; } /* Elip: ngang 50px, dọc 20px */
  .pill { border-radius: 50px; background: #e67e22; width: 300px; height: 60px; } /* Pill shape */
  .circle { border-radius: 50%; background: #9b59b6; width: 150px; height: 150px; } /* Tròn hoàn hảo */
</style>
</head>
<body>
<h1>CSS3 Border Radius Examples</h1>
<div class="box rounded">border-radius: 24px (4 góc)</div>
<div class="box normal">Không bo góc</div>
<br>
<div class="box radius-tl">Top-left</div>
<div class="box radius-tr">Top-right</div>
<div class="box radius-br">Bottom-right</div>
<div class="box radius-bl">Bottom-left</div>
<div class="box radius-tlbr">TL + BR</div>
<div class="box radius-elliptical">Elliptical 50/20</div>
<div class="box pill">Pill (capsule)</div>
<div class="box circle">Circle 50%</div>
</body>
</html>

Cú pháp border-radius

/* 1 giá trị: 4 góc */
border-radius: 10px;

/* 2 giá trị: TL+BR | TR+BL */
border-radius: 10px 20px;

/* 3 giá trị: TL | TR+BL | BR */
border-radius: 10px 20px 30px;

/* 4 giá trị: TL | TR | BR | BL (theo chiều kim đồng hồ) */
border-radius: 10px 20px 30px 40px;

/* Elip: horizontal / vertical */
border-radius: 50px / 20px;           /* 4 góc elip ngang 50, dọc 20 */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; /* Mỗi góc elip riêng */

Các hình dạng phổ biến

Lưu ý

• border-radius cắt cả background, border, content (nếu overflow: hidden)
• Kết hợp overflow: hidden để cắt content con (img, child elements)
• Performance: border-radius đơn giản rất nhanh. Complex shapes (nhiều giá trị khác nhau) chậm hơn một chút
• box-shadow tuân theo border-radius tự động