Web Cơ Bản

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:

none

- Không thiết lập đường viền cho phần tử.

Xem ví dụ
solid
dashed
dotted
double
groove
ridge
inset
outset
initial

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

(mặc định thì thuộc tính border-style có giá trị là none)

inherit

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

Xem ví dụ

- 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:

thin

- Độ dày của đường viền sẽ tương đương với 1 pixel.

Xem ví dụ
medium

- Độ dày của đường viền sẽ tương đương với 3 pixel.

thick

- Độ dày của đường viền sẽ tương đương với 5 pixel.

length

- Chỉ định độ dày của đường viền dựa theo một giá trị pixel cụ thể.

- Ví dụ: 17px tức là đường viền sẽ có độ dày 17 pixel.

initial

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

(mặc định thì thuộc tính border-width có giá trị là medium)

inherit

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

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:

color

- Chỉ định một màu sắc cụ thể (màu sắc này có thể được xác định dựa theo tên màu, giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .)

Xem ví dụ
transparent

- Đường viền trong suốt (nó có tồn tại nhưng ta không thể nhìn thấy)

initial

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

inherit

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

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

- Tuy nhiên, không phải lúc nào người lập trình viên cũng muốn như thế, mà đôi khi họ muốn mỗi cạnh của đường viền có một định dạng khác nhau, và để làm được điều đó thì chúng ta có hai cách cơ bản như sau:

  • Cách 1: Thiết lập nhiều giá trị cho thuộc tính.
  • Cách 2: Thêm tên cạnh vào bên trong tên thuộc tính.

- Trước khi tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên của từng cạnh:

top
bottom
left
right

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

Cú pháp 1:
border-style: value1 value2 value3 value4;

- Cạnh top của đường viền sẽ có kiểu value1.

- Cạnh right của đường viền sẽ có kiểu value2.

- Cạnh bottom của đường viền sẽ có kiểu value3.

- Cạnh left của đường viền sẽ có kiểu value4.

Cú pháp 2:
border-style: value1 value2 value3;

- Cạnh top của đường viền sẽ có kiểu value1.

- Cạnh left & right của đường viền sẽ có kiểu value2.

- Cạnh bottom của đường viền sẽ có kiểu value3.

Cú pháp 3:
border-style: value1 value2;

- Cạnh top & bottom của đường viền sẽ có kiểu value1.

- Cạnh left & right của đường viền sẽ có kiểu 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;
Ví dụ:

h1{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dashed;
    border-left-style:none;
}
Xem ví dụ

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)
Ví dụ:

div{
    border:5px dotted red;
}
Xem ví dụ

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

Ví dụ:

h1{
    border:solid red;
}
Xem ví dụ

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

Ví dụ:

h1{
    border:5px solid red;
    border-top:10px dotted blue;
    border-bottom:3px dashed;
}
Xem ví dụ