Thuộc tính border-width CSS

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

Thuộc tính viết tắt border-width đặt độ rộng cho tất cả các viền của phần tử hoặc đặt độ rộng riêng cho mỗi viền.

Chỉ hoạt động khi樣式 viền không phải là none. Nếu樣式 viền là none, độ rộng viền thực tế sẽ được đặt lại thành 0. Không được phép chỉ định giá trị độ dài âm.

Ví dụ 1

border-width:thin medium thick 10px;
  • Viền trên là viền mỏng
  • Viền bên phải là viền trung bình
  • Viền dưới là viền dày
  • Viền bên trái là viền rộng 10px

Ví dụ 2

border-width:thin medium thick;
  • Viền trên là 10px
  • Viền bên phải và bên trái là viền trung bình
  • Viền dưới là viền dày

Ví dụ 3

border-width:thin medium;
  • Viền trên và dưới là viền mỏng
  • Viền bên phải và bên trái là viền trung bình

Ví dụ 4

border-width:thin;
  • Tất cả bốn viền đều là viền mỏng

Ví dụ

Đặt độ rộng của bốn viền:

p
  {
  border-style:solid;
  border-width:15px;
  }

Thử ngay

Cú pháp CSS

border-width: medium|thin|thick|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
Định nghĩa viền mỏng. thin
medium Mặc định. Định nghĩa viền trung bình.
thick Định nghĩa viền dày.
length Cho phép bạn tùy chỉnh độ rộng viền.
inherit Điều này quy định rằng độ rộng viền nên thừa kế từ phần tử cha.

Các ví dụ khác

Tất cả các thuộc tính độ rộng viền trong một biểu thị
Ví dụ này minh họa cách sử dụng thuộc tính viết tắt để đặt tất cả các thuộc tính độ rộng viền trong một biểu thị.

Chi tiết kỹ thuật

Giá trị mặc định: medium
Thừa kế: no
Phiên bản: CSS1
Cú pháp JavaScript: object.style.borderWidth="thin thick"

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 4.0 1.0 1.0 3.5

Xin xem thêm:

Giáo trình CSS:BORDER CSS

Tài liệu tham khảo HTML DOM:Thuộc tính borderWidth