Thuộc tính Style borderStyle

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

borderStyle Thuộc tính này thiết lập hoặc trả về樣式 viền của phần tử.

Thuộc tính này có thể sử dụng từ một đến bốn giá trị:

  • Một giá trị, ví dụ: p {border-style: solid} - Tất cả bốn đường viền đều là đường thẳng
  • Hai giá trị, ví dụ: p {border-style: solid dotted} - Đường viền trên dưới là đường thẳng, đường viền trái phải là đường mờ
  • Ba giá trị, ví dụ: p {border-style: solid dotted double} - Đường viền trên là đường thẳng, đường viền trái phải là đường chấm, đường viền dưới là đường kép
  • Bốn giá trị, ví dụ: p {border-style: solid dotted double dashed} - Đường viền trên là đường thẳng, đường viền phải là đường mờ, đường viền dưới là đường kép, đường viền trái là đường mờ

Xin xem thêm:

Hướng dẫn CSS:BORDER CSS

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

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

Mô hình

Ví dụ 1

Thêm viền rỗng cho phần tử <div>:

document.getElementById("myDiv").style.borderStyle = "solid";

Thử ngay

Ví dụ 2

Thay đổi phong cách viền của bốn cạnh của phần tử <div>:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Thử ngay

Ví dụ 3

Trả về phong cách viền của phần tử <div>:

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

Thử ngay

Ví dụ 4

Giải thích cho tất cả các giá trị khác nhau:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Thử ngay

Cú pháp

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

object.style.borderStyle

Đặt thuộc tính borderStyle:

object.style.borderStyle = value
Giá trị Mô tả
none Định nghĩa viền không có. Mặc định.
hidden Tương đương với "none", nhưng ngoại trừ khi giải quyết xung đột viền của phần tử bảng.
dotted Định nghĩa viền dotted.
dashed Định nghĩa viền dashed.
solid Định nghĩa viền rỗng.
double Định nghĩa hai viền. Chiều rộng của hai viền bằng giá trị của border-width.
groove Định nghĩa viền groove 3D. Hiệu ứng phụ thuộc vào border-color giá trị.
ridge Định nghĩa viền ridge 3D. Hiệu ứng phụ thuộc vào border-color giá trị.
inset Định nghĩa viền inset 3D. Hiệu ứng phụ thuộc vào border-color giá trị.
outset Định nghĩa viền outset 3D. Hiệu ứng phụ thuộc vào giá trị của border-color.
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: Không có
Giá trị trả về: Chuỗi biểu thị phong cách viền của phần tử.
Phiên bản CSS: CSS1

Trình duyệt hỗ trợ

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