Tính chất borderWidth của Style

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

borderWidth Tính chất này thiết lập hoặc trả về độ rộng của viền của phần tử.

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

  • Một giá trị, ví dụ: p {border-width: thick} - Cả bốn cạnh của viền đều dày
  • Hai giá trị, ví dụ: p {border-width: thick thin} - Viền trên và dưới đậm, viền trái và phải mỏng
  • Ba giá trị, ví dụ: p {border-width: thick thin medium} - Viền trên đậm, viền trái và phải mỏng, viền dưới trung bình
  • Bốn giá trị, ví dụ: p {border-width: thick thin medium 10px} - Viền trên đậm, viền phải mỏng, viền dưới trung bình, viền trái 10px

Xem thêm:

Giáo trình CSS:CSS viền

Hướng dẫn CSS:Thuộc tính border-width

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

Thực hành

Mô hình 1

Thay đổi độ rộng bốn viền của yếu tố <div>:

document.getElementById("myDiv").style.borderWidth = "thick";

Thử nghiệm trực tiếp

Mô hình 2

Thay đổi độ rộng viền trên và dưới của yếu tố <div> thành đậm, độ rộng viền trái và phải thành mỏng:

document.getElementById("myDiv").style.borderWidth = "thick thin";

Thử nghiệm trực tiếp

Mô hình 3

Sử dụng giá trị chiều dài để thay đổi độ rộng bốn viền của yếu tố <div>:

document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";

Thử nghiệm trực tiếp

Mô hình 4

Trả về độ rộng viền của yếu tố <div>:

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

Thử nghiệm trực tiếp

Cú pháp

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

object.style.borderWidth

Đặt thuộc tính borderWidth:

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
Giá trị Mô tả
thin Định nghĩa viền mỏng.
medium Định nghĩa viền trung bình. Mặc định.
thick Định nghĩa viền đậm.
length Độ rộng viền tính bằng chiều dài.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit Ghi thừa thuộc tính này từ yếu tố cha. Xem thêm inherit。

Chi tiết kỹ thuật

Giá trị mặc định： medium
Giá trị trả về： chuỗi, biểu thị độ rộng của viền yếu tố.
CSS phiên bản： CSS1

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ợ