Thuộc tính border 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 trong CSS

- Thuộc tính border dùng để thiết lập một đường viền bao xung quanh 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 là cú pháp viết tắt của ba thuộc tính:

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

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

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

border: width style color|initial|inherit;

- Trong đó, ta thấy giá trị thuộc tính border 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ủa phần tử.

- Giá trị "style" xác định kiểu đường viền của phần tử

- Giá trị "color" xác định màu đường viền của phần tử.

- 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ó.

(Hầu hết các phần tử mặc định không được thiết lập đường viền)

Xem ví dụ
inherit

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

Xem ví dụ