Thuộc tính border-left trong CSS


Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:

1) Thuộc tính border-left trong CSS

- Thuộc tính border-left dùng để thiết lập đường viền cạnh bên trái của phần tử HTML, bao gồm việc xác định:

  • Độ dày của đường viền.
  • Kiểu của đường viền.
  • Màu của đường viền.

- Hay nói cách khác, thuộc tính border-left là cú pháp viết tắt của ba thuộc tính:

  • border-left-width
  • border-left-style
  • border-left-color

2) Cách sử dụng thuộc tính border-left trong CSS

- Để sử dụng thuộc tính border-left, ta dùng cú pháp như sau:

border-left: width style color|initial|inherit;

- Trong đó, ta thấy giá trị thuộc tính border-left có thể được xác định bởi một trong ba loại:

width style color

- Giá trị "width" xác định độ dày đường viền cạnh bên trái.

- Giá trị "style" xác định kiểu đường viền cạnh bên trái

- Giá trị "color" xác định màu đường viền cạnh bên trái.

- Lưu ý: Đối với loại bộ ba giá trị này, ta không nhất thiết phải cung cấp đủ ba giá trị, những giá trị nào thiếu sẽ tự động sử dụng giá trị mặc định của nó, ví dụ:

  • Nếu giá trị width thiếu thì mặc định là medium.
  • Nếu giá trị style thiếu thì mặc định là none.
  • Nếu giá trị color thiếu thì mặc định nó sẽ phụ thuộc vào màu văn bản của phần tử.
Xem ví dụ
initial

- Sử dụng giá trị mặc định của nó.

(mặc định cạnh bên trái của phần tử không được hiển thị)

Xem ví dụ
inherit

- Kế thừa giá trị thuộc tính border-left từ phần tử cha của nó.

Xem ví dụ