Thuộc tính border-block trong CSS
Bùi Tấn Lực - 854
- 05/10/2025
Chức năng của Thuộc tính border-block trong CSS
Thuộc tính border-block trong CSS dùng để kẻ đường viền trên và đường viền dưới cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc.
Cú pháp của Thuộc tính border-block trong CSS
border-block: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền trên và đường viền dưới, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền trên và đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền trên và đường viền dưới, ví dụ: #ff0000, red,...
Code Thuộc tính border-block trong CSS
border-block: 5px solid green;
border-block: 5px dotted green;
border-block: 1px solid #ff0000;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính border-block trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%;float:left;height:auto;background:antiquewhite;margin-bottom:10px;padding:10px}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính border-block trong CSS</h1>
<span>Dùng để kẻ đường viền trên và đường viền dưới cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc.</span>
<div style="border-block: 1px solid #ff0000;">border-block: 1px solid #ff0000;</div>
<div style="border-block: 5px solid green;">border-block: 5px solid green;</div>
<div style="border-block: 5px dotted green;">border-block: 5px dotted green;</div>
<div style="border-block: 1px dotted red;">border-block: 1px dotted red;</div>
<div style="border-block: 5px double green;">border-block: 5px double green;</div>
<div style="border-block: 10px double red;">border-block: 10px double red;</div>
<div style="border-block: 5px dashed green;">border-block: 5px dashed green;</div>
<div style="border-block: 10px dashed red;">border-block: 10px dashed red;</div>
<div style="border-block: 1px inset red;">border-block: 1px inset red;</div>
<div style="border-block: 5px inset green;">border-block: 5px inset green;</div>
<div style="border-block: 10px inset red;">border-block: 10px inset red;</div>
<div style="border-block: 1px outset red;">border-block: 1px outset red;</div>
<div style="border-block: 5px outset green;">border-block: 5px outset green;</div>
<div style="border-block: 10px outset red;">border-block: 10px outset red;</div>
<div style="border-block: 1px ridge red;">border-block: 1px ridge red;</div>
<div style="border-block: 5px ridge green;">border-block: 5px ridge green;</div>
<div style="border-block: 1px groove red;">border-block: 1px groove red;</div>
<div style="border-block: 5px groove green;">border-block: 5px groove green;</div>
</body>
</html>
Ứng dụng thuộc tính border-block trong CSS
Thuộc tính border-block phù hợp khi cần kiểm soát đường viền theo chiều block mà không muốn phụ thuộc trực tiếp vào hướng ngang hoặc dọc của giao diện. Cách viết này đặc biệt hữu ích khi xây dựng bố cục có khả năng thích ứng với nhiều kích thước màn hình hoặc cách hiển thị văn bản khác nhau.
Tạo đường viền trên và dưới cho phần tử
Trong bố cục viết từ trái sang phải thông thường, border-block thường tạo đường viền ở phía trên và phía dưới phần tử. Nhờ đó, có thể tạo vùng phân cách cho tiêu đề, khối nội dung hoặc các thành phần giao diện mà không cần khai báo riêng từng cạnh.
Ví dụ, đoạn CSS sau tạo đường viền ở hai phía block của một hộp nội dung:
.content-box {
border-block: 1px solid #ddd;
}
Cách viết này giúp mã CSS ngắn gọn và thể hiện rõ mục đích: đường viền được đặt theo trục block. Khi hướng viết thay đổi, trình duyệt có thể tự xác định cạnh tương ứng thay vì phải sửa lại từng thuộc tính.
Kết hợp border-block với border-inline
border-block và border-inline có thể được sử dụng cùng nhau để kiểm soát toàn bộ đường viền theo hai trục của phần tử. Đây là cách tiếp cận phù hợp với CSS Logical Properties, giúp mã nguồn ít phụ thuộc vào các hướng vật lý như trên, dưới, trái và phải.
.card {
border-block: 1px solid #ddd;
border-inline: 1px solid #ddd;
}
Trong thực tế, có thể đặt giá trị khác nhau cho hai trục để tạo điểm nhấn cho giao diện. Ví dụ, đường viền theo trục block có thể rõ hơn, trong khi đường viền theo trục inline được làm nhẹ để phân cấp thị giác.
Sử dụng border-block trong thiết kế giao diện responsive
Khi giao diện cần hoạt động trên nhiều kích thước màn hình, border-block giúp giảm số lượng quy tắc CSS phải điều chỉnh theo từng trường hợp. Thay vì gắn đường viền với một cạnh cố định, thuộc tính này xác định vị trí dựa trên trục block của phần tử.
Điều này đặc biệt hữu ích với các thành phần như danh sách, thẻ nội dung hoặc khu vực điều hướng. Khi bố cục thay đổi, cách khai báo logic giúp hạn chế việc phải viết lại nhiều đoạn CSS chỉ để thay đổi hướng đường viền.
Khi nào nên dùng border-block thay cho border-top và border-bottom?
Nên ưu tiên border-block khi đường viền được xác định theo ý nghĩa bố cục thay vì một vị trí cố định. Cách này phù hợp với giao diện hiện đại, đặc biệt khi dự án có sử dụng các thuộc tính CSS Logical Properties hoặc cần hỗ trợ nhiều hướng viết.
Ngược lại, nếu thiết kế bắt buộc đường viền nằm chính xác ở cạnh trên hoặc cạnh dưới bất kể hướng viết, border-top và border-bottom vẫn là lựa chọn trực tiếp và dễ hiểu hơn. Việc lựa chọn nên dựa trên mục đích của đường viền thay vì chỉ dựa vào độ ngắn của cú pháp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-block trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
