Khám phá sức mạnh của thuộc tính border trong CSS với cú pháp và ví dụ minh họa

Sử dụng thuộc tính border trong CSS để xác định kiểu, chiều rộng, và màu sắc của đường viền cho phần tử. Tham khảo bài viết này để hiểu rõ hơn về các thuộc tính border trong CSS từ Mytour.

Khám phá đặc điểm của thuộc tính border trong CSS

Khám Phá Thuộc Tính Border Trong CSS

1. Border-Style Trong CSS

Thuộc tính border-style trong CSS quy định kiểu đường viền sẽ được hiển thị.

Thuộc tính này bao gồm các lựa chọn:
- Chấm: đường viền sẽ là chấm.
- Nét đứt: đường viền sẽ là nét đứt.
- Liền: đường viền sẽ là liền.
- Đôi: đường viền sẽ là đôi.
- Rãnh 3D: đường viền sẽ có hiệu ứng rãnh 3D, phụ thuộc vào màu của đường viền.
- Chóp: đường viền sẽ tạo hiệu ứng chóp, phụ thuộc vào màu của đường viền.
- Bóng bên trong: đường viền sẽ tạo hiệu ứng bóng bên trong, phụ thuộc vào màu của đường viền.
- Bóng bên ngoài: đường viền sẽ tạo hiệu ứng bóng bên ngoài, phụ thuộc vào màu của đường viền.
- Không có: không có đường viền.
- Ẩn: đường viền sẽ ẩn đi.

Thuộc tính border-style có thể có từ 1 đến 4 giá trị (cho đường viền ở trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái).

Ví dụ:

Kết quả hiển thị như sau:

2. Chiều Rộng Đường Viền

Thuộc tính border-width trong CSS quy định độ dày của 4 đường viền.

Đơn vị có thể là px, pt, cm, em, ... hoặc một trong ba giá trị được xác định trước là mảnh, trung bình hoặc dày.

Border-width có thể chứa từ 1 đến 4 giá trị (cho đường viền ở trên cùng, bên phải, dưới cùng và bên trái).

Mẫu:

Kết quả xuất hiện như sau:

3. Màu Sắc Đường Viền

Sử dụng border-color để đặt màu cho 4 đường viền.

Màu sắc được xác định bởi:
- Tên: chỉ định tên một màu, ví dụ như đỏ.
- Hex: chỉ định giá trị hex, ví dụ như #ff0000.
- RGB: chỉ định giá trị RGB, ví dụ như rgb(255,0,0).
- Thuộc tính transparent.

Thuộc tính này có thể chứa từ 1 đến 4 giá trị (đối với đường viền ở trên cùng, bên phải, dưới cùng, và bên trái).

Nếu border-color không được thiết lập, màu của đường viền sẽ giống màu của phần tử.

Ví dụ:

Kết quả xuất hiện như sau:

4. Đường viền cho từng phần

Trong các ví dụ trên, chúng ta có thể chỉ định và tạo từng đường viền khác nhau cho từng phần (viền trên, trái, phải và viền dưới).

Trong CSS, cũng có các thuộc tính để chỉ định và tạo từng đường viền (trên, dưới, phải và trái).

Ví dụ:

Kết quả xuất hiện như sau:

Trong ví dụ này:

- Nếu thuộc tính border-style có 4 giá trị:
border-style: dotted solid double dashed;
Đường viền chóp là đường viền nét đứt.
Đường viền bên phải liền.
Đường viền dưới là đường viền đôi.
Đường viền trái là đường viền nét đứt.

- Nếu thuộc tính border-style có 3 giá trị:
border-style: dotted solid double;
Đường viền chóp là đường viền nét đứt.
Đường viền trái và phải là đường viền liền.
Đường viền dưới là đường viền đôi.

- Nếu thuộc tính border-style có 2 giá trị:
border-style: dotted solid;
Đường viền chóp và dưới là đường viền nét đứt.
Đường viền trái và phải là đường viền liền.

- Nếu thuộc tính border-style có 1 giá trị:
border-style: dotted;

Tất cả 4 đường đều là đường viền nét đứt.

5. Thuộc tính border rút gọn

Để viết mã ngắn gọn, chúng ta có thể sử dụng một thuộc tính duy nhất để khai báo tất cả các thuộc tính border.

Border là thuộc tính rút gọn của các thuộc tính dưới đây:
border-width
border-style (bắt buộc)
border-color
Ví dụ:

Kết quả xuất hiện như dưới đây:

Ngoài ra, có thể áp dụng tất cả các thuộc tính border riêng lẻ cho mỗi phần (trái, phải, trên, dưới) trong một khối duy nhất.

Ví dụ 1:

Kết quả xuất hiện như dưới đây:

Ví dụ 2:

Hiển thị kết quả như sau:

6. Thuộc tính border-radius

Sử dụng thuộc tính border-radius để làm tròn góc của phần tử.

Hiển thị kết quả như sau:

Lưu ý: Hãy chú ý rằng thuộc tính border-radius không được hỗ trợ trên IE8 và các phiên bản cũ hơn.

7. Danh sách các thuộc tính border trong CSS

Dưới đây là bảng liệt kê các thuộc tính border trong CSS:

Bài học CSS trên đây Mytour vừa giới thiệu đến bạn về các thuộc tính border trong CSS. Trong các bài học CSS sắp tới, Mytour sẽ tiếp tục hướng dẫn về thuộc tính Margin trong CSS.