Cách tạo đường viền cho một phần tử HTML

HAI BỐ CON NHÀ MÈO ĐANG ÔM NHAU NGỦ

1) Cách tạo đường viền cho một phần tử

- Thông thường thì "đường viền" của một phần tử sẽ có ba đặc điểm chính : kiểu, độ dày, màu sắc (ví dụ như đường viền của phần tử phía trên có kiểu là double, độ dày 20 pixel, màu xanh lá cây)

- Cho nên, khi muốn tạo đường viền cho một phần tử thì về cơ bản chúng ta cần phải thực hiện ba công việc như sau: (1) thiết lập kiểu đường viền cho phần tử, (2) thiết lập độ dày của đường viền, (3) xác định màu sắc của đường viền.

1.1) Thiết lập "kiểu đường viền" cho phần tử

- Để thiết lập kiểu đường viền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính border-style cho phần tử đó với cú pháp như sau:

border-style: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:

- Lưu ý: Khi tạo đường viền cho phần tử thì công việc xác định kiểu đường viền là quan trọng nhất, nếu ta không xác định kiểu đường viền hoặc thiết lập giá trị none thì đường viền sẽ không được hiển thị.

1.2) Thiết lập "độ dày" của đường viền

- Để thiết lập độ dày của đường viền thì chúng ta sử dụng thuộc tính border-width với cú pháp như sau:

border-width: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:

1.3) Thiết lập "màu sắc" của đường viền

- Thông thường thì đường viền của phần tử sẽ có màu trùng với màu của văn bản, nếu muốn thiết lập lại màu của đường viền thì chúng ta sử dụng thuộc tính border-color với cú pháp như sau:

border-color: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:

2) Thiết lập đường viền cho từng cạnh

- Sau khi tìm hiểu xong phần hướng dẫn phía trên thì chắc các bạn cũng đã thấy: khi chúng ta tạo đường viền cho một phần tử thì mặc định cả bốn cạnh của đường viền sẽ có chung một định dạng

2.1) Thiết lập nhiều giá trị cho thuộc tính

border-style: value1 value2 value3 value4;

border-style: value1 value2 value3;

border-style: value1 value2;

2.2) Thêm tên cạnh vào bên trong tên thuộc tính

- Để thiết lập đường viền cho riêng từng cạnh bằng cách thêm tên cạnh vào bên trong tên thuộc tính thì chúng ta sử dụng cú pháp như sau:

border-têncạnh-style: value;

h1{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dashed;
    border-left-style:none;
}

3) Tạo đường viền cho phần tử (cú pháp rút gọn)

- Trong phần hướng dẫn ở mục một, để tạo một cái đường viền cho phần tử thì chúng ta cần phải sử dụng đến ba thuộc tính: border-style border-width border-color. Trong phần này, tôi sẽ hướng dẫn các bạn rút gọn lại bằng cách sử dụng duy nhất mỗi thuộc tính border thôi.

- Cú pháp:

border: width style color;

- Trong đó:

• Giá trị width dùng để xác định độ dày của đường viền (giống thuộc tính border-width)
• Giá trị style dùng để xác định kiểu của đường viền (giống thuộc tính border-style)
• Giá trị color dùng để xác định màu sắc của đường viền (giống thuộc tính border-color)

div{
    border:5px dotted red;
}

- Lưu ý: Thuộc tính border không bắt buộc chúng ta phải gán cho nó đủ ba giá trị, những giá trị nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính tương ứng.

h1{
    border:solid red;
}

- Ngoài ra, nếu muốn thiết lập đường viền cho riêng từng cạnh thì các bạn hãy thêm -têncạnh vào phía sau thuộc tính border.

h1{
    border:5px solid red;
    border-top:10px dotted blue;
    border-bottom:3px dashed;
}