CSS Outline - Tạo Đường Viền Ngoài (Khác Với Border)

Khi muốn làm nổi bật phần tử, bạn có thể thêm đường viền ngoài (outline) bên ngoài border. Thuộc tính outline làm chính điều này.

Outline Là Gì? Khác Border Như Thế Nào?

Outline vẽ đường line bên ngoài border, là lớp ngoài cùng của box model.

Khác biệt chính:

• Outline nằm ngoài border, có thể đè lên nội dung khác nhưng không chiếm diện tích (không ảnh hưởng layout).
• Outline không thuộc kích thước phần tử (không làm thay đổi width/height).
• Outline không thể tùy biến từng cạnh riêng biệt (cả 4 cạnh giống nhau).

CSS Outline Property (Viết Tắt)

Shorthand cho 3 sub-properties:

• outline-color: Màu outline
• outline-style: Kiểu outline
• outline-width: Độ dày outline

outline: outline-color outline-style outline-width;

Thứ tự tự do.

Ví Dụ: Outline Đỏ Chấm 3px, Border Đen Solid 1px

<p class="outlineExample">This is a box.</p>

.outlineExample {
  width: 100px;
  border: black solid 1px;
  outline: red dotted 3px;
}

Outline đỏ chấm 3px nằm ngoài border đen solid 1px.

Chi Tiết Sub-properties

outline-width

Giá trị: thin (1px), medium (3px), thick (5px), hoặc đơn vị px, pt, cm, em, rem...

.outlineExample {
  outline-style: solid;
  outline-color: red;
  outline-width: medium; /* 3px */
}

outline-color

Chấp nhận: tên màu, HEX, RGB, HSL, invert (đảo màu).

.outlineExample { outline-color: blue; }

outline-style

10 giá trị: dotted, dashed, groove, ridge, solid, double, inset, outset, none, hidden.

outline-offset - Khoảng Cách Outline Với Border

Tạo khoảng trống trong suốt giữa outline và border. Không thuộc shorthand outline.

.outlineExample {
  width: 200px;
  border: black solid 1px;
  outline: red 2px solid;
  outline-offset: 10px;
}

Khoảng cách 10px giữa border và outline.

Kết Luận

outline tạo viền ngoài để highlight phần tử. 3 sub-properties: color, width, style. outline-offset tạo khoảng cách. Outline không ảnh hưởng layout - lý tưởng cho focus state, debugging.