Border trong CSS: độ dày, kiểu, màu và border-radius

Cách viết rút gọn border

border vẽ một đường quanh phần tử, nằm giữa padding và margin. Cách viết rút gọn nhận ba phần theo thứ tự bất kỳ: độ dày, kiểu và màu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Kiểu viền là phần bạn không thể bỏ qua. Mặc định của nó là none, nên border: 2px #2563eb; không vẽ gì cả. Nếu bỏ màu, đường viền lấy màu chữ của phần tử.

Các kiểu viền

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double cần ít nhất 3px mới hiện được hai đường. groove, ridge, inset và outset đổ bóng màu để trông như 3D và hơi khác nhau giữa các trình duyệt. hidden trông giống none; hai giá trị này chỉ khác nhau trong bảng có viền gộp (collapsed), nội dung có trong trang viền bảng HTML.

Từng cạnh một

Mỗi cạnh có cách viết rút gọn riêng (border-top, border-right, border-bottom, border-left), và mỗi phần có thuộc tính đầy đủ theo cạnh như border-top-color. Các phiên bản logic, border-inline-start và border-block-end, đi theo hướng của chữ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width và border-style nhận từ một đến bốn giá trị theo cùng thứ tự chiều kim đồng hồ như padding: trên, phải, dưới, trái.

Bo góc với border-radius

border-radius bo tròn góc của đường viền và của nền, nên dùng được cả với phần tử không có viền.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Phần tử con có nền có thể lòi ra ngoài góc bo tròn của phần tử cha. overflow: hidden trên phần tử cha sẽ cắt nó theo đường cong.

Border và outline

Outline trông giống border nhưng được vẽ bên ngoài và không chiếm chỗ, nên thêm outline không bao giờ làm xê dịch thứ gì. Vì vậy trình duyệt dùng outline cho vòng focus.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

Lỗi thường gặp

• Không có kiểu viền. border: 1px #111827; và border-color: red; không vẽ gì. Hãy thêm solid (hoặc kiểu khác).
• Viền làm bố cục nhảy khi hover. Hãy giữ chỗ bằng một viền trong suốt, hoặc dùng outline hay box-shadow.
• Quên tính viền vào chiều rộng. Phần tử width: 100% có viền sẽ tràn khỏi phần tử chứa khi dùng content-box. Hãy dùng box-sizing: border-box.
• border-radius mà phần tử con lòi ra ở góc. Thêm overflow: hidden cho phần tử cha được bo góc.
• Xóa outline focus bằng outline: none. Người dùng bàn phím cần nó; hãy định dạng lại outline thay vì xóa đi.