Thuộc tính outline-color CSS

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

Outline (viền) là một đường vẽ xung quanh phần tử, nằm ngoài mép viền, có thể làm nổi bật phần tử. Thuộc tính outline có thể thiết lập đường viền xung quanh phần tử.

Chú thích:Hãy luôndeclare thuộc tính outline-style trước thuộc tính outline-color. Một phần tử chỉ có thể thay đổi màu viền sau khi đã có viền.

Chú thích:Viền không chiếm không gian và không nhất thiết phải là hình vuông.

Thuộc tính outline-color thiết lập màu cho phần viền nhìn thấy của một phần tử. Hãy nhớ rằng, phong cách viền không thể là none, nếu không viền sẽ không xuất hiện.

Xem thêm:

Hướng dẫn CSS:Khung CSS

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

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

Ví dụ

Thiết lập màu viền điểm:

p
  {
  outline-style:dotted;
  outline-color:#00ff00;
  }

Thử ngay

Ngữ pháp CSS

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
color_name Quy định màu viền bằng tên màu (ví dụ red).
hex_number Quy định màu viền bằng giá trị hex (ví dụ #ff0000).
rgb_number Quy định màu viền bằng mã rgb (ví dụ rgb(255,0,0)).
invert Mặc định. Thực hiện phản ánh màu ngược (màu ngược lại). Giúp viền nhìn thấy được trên nền màu khác nhau.
inherit Quy định rằng thiết lập màu viền nên kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: invert
Kế thừa: no
Phiên bản: CSS2
Ngữ pháp JavaScript: object.style.outlineColor="#0000FF"

Thử ngay

Thiết lập màu viền
Ví dụ này minh họa cách thiết lập màu viền.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra 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

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