Thuộc tính outline CSS

Định nghĩa và cách sử dụng

Thuộc tính outline (đường viền) là đường vẽ xung quanh phần tử, nằm bên ngoài mép viền, có thể起到 tác dụng nhấn mạnh phần tử.

Ghi chú:Đường viền轮廓 không chiếm không gian, cũng không nhất thiết phải là hình vuông.

Thuộc tính outline viết tắt trong một biểu đạt thiết lập tất cả các thuộc tính đường viền.

Có thể thiết lập theo thứ tự sau các thuộc tính:

Nếu không thiết lập một trong số các giá trị, cũng không có vấn đề gì, ví dụ outline:solid #ff0000; cũng được phép.

Xin xem thêm:

Hướng dẫn CSS:Khung viền CSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính outline

Ví dụ

Đặt phong cách cho 4 cạnh:

p
  {
  outline:#00FF00 dotted thick;
  }

Thử làm ngay

Cú pháp CSS

outline: outline-width outline-style outline-color|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
outline-color Định nghĩa màu sắc của viền.outline-color giá trị có thể có.
outline-style Định nghĩa phong cách của viền.outline-style giá trị có thể có.
outline-width Định nghĩa độ rộng của viền.outline-width giá trị có thể có.
inherit Định nghĩa rằng thuộc tính outline nên kế thừa từ thiết lập của phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: invert none medium
Kế thừa: no
Phiên bản: CSS2
Cú pháp JavaScript: object.style.outline="#0000FF dotted thin"

TIY ví dụ

Vẽ đường viền xung quanh phần tử
Ví dụ này minh họa cách sử dụng thuộc tính outline để vẽ một đường viền xung quanh phần tử.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Ghi chú:Nếu đã quy định !DOCTYPE, thì IE8 hỗ trợ thuộc tính outline.