Thuộc tính outline phong cách

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

outline Thuộc tính để thiết lập hoặc trả về tất cả các thuộc tính đường viền một cách rút gọn.

Bằng thuộc tính này, bạn có thể thiết lập/trả về một hoặc nhiều mục sau (theo bất kỳ thứ tự nào):

Đường viền là một đường quanh phần tử. Nó hiển thị xung quanh vành đai của phần tử. Tuy nhiên, nó khác với Thuộc tính border khác.

Đường viền không phải là một phần của kích thước của phần tử, vì vậy thuộc tính chiều rộng và chiều cao của phần tử không bao gồm độ rộng của đường viền.

Xem thêm:

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

Tài liệu tham khảo CSS:Thuộc tính outline

Mẫu

Ví dụ 1

Thêm đường viền xung quanh phần tử <div>:

document.getElementById("myDiv").style.outline = "thick solid #0000FF";

Thử ngay

Ví dụ 2

Thay đổi độ rộng, phong cách và màu sắc của đường viền của phần tử <div>:

document.getElementById("myDiv").style.outline = "5px dotted green";

Thử ngay

Ví dụ 3

Trả về giá trị thuộc tính outline của phần tử <div>:

alert(document.getElementById("myDiv").style.outline);

Thử ngay

Cú pháp

Trả về thuộc tính outline:

object.style.outline

Đặt thuộc tính outline:

object.style.outline = "width style color|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
width Đặt độ rộng cho đường viền.
style Đặt phong cách cho đường viền.
color Đặt màu sắc cho đường viền.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: medium none invert
Giá trị trả về: chuỗi biểu thị độ rộng, phong cách và/hoặc màu sắc của đường viền của phần tử.
Phiên bản CSS: CSS2

hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
hỗ trợ hỗ trợ hỗ trợ hỗ trợ hỗ trợ