Border CSS là gì? Hướng dẫn chi tiết cách tùy chỉnh đường viền

Border CSS là gì?

Border CSS là thuộc tính dùng để tạo và điều chỉnh đường viền bao quanh các phần tử HTML. Đường viền này nằm giữa margin (khoảng cách ngoài) và padding (khoảng cách trong).

Với Border CSS, bạn có thể tùy chỉnh kiểu dáng, độ dày, màu sắc và hiệu ứng hiển thị của viền để làm nổi bật nội dung và tăng tính thẩm mỹ cho trang web.

Các thuộc tính quan trọng của Border CSS

border-style: Thiết lập kiểu viền

Cú pháp:

border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden; 

• Có thể dùng 1 đến 4 giá trị để áp dụng cho các cạnh: trên, phải, dưới, trái.
• Một số kiểu như groove, ridge, inset, outset phụ thuộc vào màu sắc đã khai báo qua border-color.

border-width: Thiết lập độ dày viền

Cú pháp:

border-width: thin | medium | thick | ; 

• Cần đi kèm với border-style để có hiệu lực.
• Có thể dùng từ 1 đến 4 giá trị để chỉ định độ dày cho từng cạnh.

border-color: Thiết lập màu sắc viền

Cú pháp:

border-color: color | transparent; 

• Hỗ trợ khai báo bằng tên màu (red), mã hex (#ff0000), RGB (rgb(255,0,0)), HSL,...
• Có thể khai báo từ 1 đến 4 giá trị tương ứng với từng cạnh của phần tử.

Padding: Tạo khoảng cách giữa nội dung và border

Thuộc tính padding không thuộc nhóm border nhưng rất quan trọng để tạo không gian giữa nội dung và viền của phần tử.

Cú pháp:

padding:  | ; 

• Có thể dùng từ 1 đến 4 giá trị tương tự như border-width.
• Nếu không khai báo, khoảng cách giữa nội dung và viền sẽ là 0.

Ví dụ:

padding: 10px; /* Cả 4 cạnh */ padding: 5% 10%; /* Trên/dưới 5%, trái/phải 10% */ padding: 10px 5px 15px; /* Trên, trái/phải, dưới */ 

box-shadow: Tạo hiệu ứng đổ bóng cho border

Sử dụng box-shadow để tạo bóng đổ quanh phần tử, làm nổi bật khối nội dung.

Cú pháp:

box-shadow: h-offset v-offset blur spread color inset; 

• h-offset, v-offset: khoảng cách theo chiều ngang và dọc.
• blur: độ mờ của bóng.
• spread: độ lan tỏa.
• color: màu sắc bóng.
• inset: bóng đổ bên trong phần tử.

Ví dụ:

box-shadow: 4px 4px 10px rgba(0,0,0,0.3); 

border-image: Sử dụng hình ảnh làm đường viền

Giúp tạo viền độc đáo bằng hình ảnh thay vì màu đơn sắc.

Cú pháp:

border-image: url(image.png) slice repeat width outset; 

• slice: chia ảnh thành 9 vùng.
• repeat: cách ảnh được lặp hoặc kéo giãn.
• width, outset: tùy chọn độ rộng và khoảng cách hình ảnh ra ngoài viền.

Lưu ý: Cần có border-width khác 0 để hiển thị được border-image.

border-radius: Tạo góc bo tròn cho viền

Dùng để làm tròn góc của phần tử. Có thể dùng giá trị tuyệt đối (px, em) hoặc phần trăm.

Cú pháp:

border-radius:  |    ; 

Ví dụ:

border-radius: 8px; /* Tất cả các góc */ border-radius: 8px 4px; /* Trên trái & dưới phải, trên phải & dưới trái */ border-radius: 10px 0 20px 5px; /* Từng góc cụ thể */ 

border-collapse: Gộp hoặc tách viền trong bảng

border-collapse là thuộc tính áp dụng cho bảng, kiểm soát cách hiển thị đường viền giữa các ô.

Cú pháp:

border-collapse: collapse | separate; 

• collapse: Gộp các đường viền liền nhau thành một.
• separate: Giữ các đường viền tách biệt.

Lưu ý: Khi dùng collapse, không nên dùng cellspacing trong HTML vì chúng có thể xung đột.

Cách khai báo border bằng cú pháp rút gọn (shorthand)

Để tiết kiệm thời gian và mã nguồn, bạn có thể gộp các thuộc tính border-width, border-style, border-color vào một dòng duy nhất.

Cú pháp:

border: