CSS3 Bo góc (Rounded Corners) với border-radius

Bo góc trong CSS3

CSS3 giới thiệu thuộc tính border-radius cho phép **bo tròn các góc** của phần tử mà không cần hình ảnh. Đây là một trong những tính năng CSS3 phổ biến nhất.

Cú pháp cơ bản

/* Cú pháp đầy đủ - 4 góc */
border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */

/* Cú pháp rút gọn */
border-radius: 10px;        /* Tất cả 4 góc = 10px */
border-radius: 10px 20px;   /* TL/BR = 10px, TR/BL = 20px */
border-radius: 10px 20px 30px; /* TL=10, TR=20, BR=30, BL=20 */

/* Cú pháp slash (elip) - bán kính ngang / bán kính dọc */
border-radius: 60px / 15px; /* Góc elip: bán kính ngang 60px, dọc 15px */

Các thuộc tính con riêng lẻ

Ví dụ thực hành

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px; height: 150px;
      background: #FF0000;
      padding: 20px;
      margin: 20px;
      display: inline-block;
      color: white; text-align: center; line-height: 150px;
      font-weight: bold;
    }
    .rounded { border-radius: 15px; }
    .circle { border-radius: 50%; width: 150px; height: 150px; line-height: 150px; }
    .pill { border-radius: 50px; padding: 10px 40px; width: auto; height: auto; line-height: normal; }
    .ellipse-corner { border-radius: 60px / 15px; }
    .custom-corners { border-radius: 20px 0 20px 0; } /* Chỉ 2 góc đối diện */
  </style>
</head>
<body>
  <div class="box rounded">Bo tròn 15px</div>
  <div class="box circle">Hình tròn 50%</div>
  <div class="box pill">Hình thuốc (pill)</div>
  <div class="box ellipse-corner">Góc elip 60/15</div>
  <div class="box custom-corners">2 góc đối diện</div>
</body>
</html>

Mẹo hay

• border-radius: 50% + width=height → Hình tròn hoàn hảo
• border-radius: 9999px → Hình thuốc (pill) tự động co giãn theo nội dung
• Kết hợp với box-shadow để tạo hiệu ứng depth
• Hỗ trợ tốt trên tất cả trình duyệt hiện đại (IE9+)