Thuộc tính border-block-start trong CSS
Bùi Tấn Lực - 862
- 05/10/2025
Chức năng của Thuộc tính border-block-start trong CSS
Thuộc tính border-block-start trong CSS dùng để kẻ đường viền trên 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-start trong CSS
border-block-start: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền trên, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền trên ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền trên, ví dụ: #ff0000, red,...
Code Thuộc tính border-block-start trong CSS
border-block-start: 1px solid #ff0000;
border-block-start: 5px solid green;
border-block-start: 5px dotted green;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-start 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>Code Thuộc tính border-block-start trong CSS</h1>
<span>Dùng để kẻ đường viền trên 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-start: 1px solid #ff0000;">border-block-start: 1px solid #ff0000;</div>
<div style="border-block-start: 5px solid green;">border-block-start: 5px solid green;</div>
<div style="border-block-start: 5px dotted green;">border-block-start: 5px dotted green;</div>
<div style="border-block-start: 1px dotted red;">border-block-start: 1px dotted red;</div>
<div style="border-block-start: 5px double green;">border-block-start: 5px double green;</div>
<div style="border-block-start: 10px double red;">border-block-start: 10px double red;</div>
<div style="border-block-start: 5px dashed green;">border-block-start: 5px dashed green;</div>
<div style="border-block-start: 10px dashed red;">border-block-start: 10px dashed red;</div>
<div style="border-block-start: 1px inset red;">border-block-start: 1px inset red;</div>
<div style="border-block-start: 5px inset green;">border-block-start: 5px inset green;</div>
<div style="border-block-start: 10px inset red;">border-block-start: 10px inset red;</div>
<div style="border-block-start: 1px outset red;">border-block-start: 1px outset red;</div>
<div style="border-block-start: 5px outset green;">border-block-start: 5px outset green;</div>
<div style="border-block-start: 10px outset red;">border-block-start: 10px outset red;</div>
<div style="border-block-start: 1px ridge red;">border-block-start: 1px ridge red;</div>
<div style="border-block-start: 5px ridge green;">border-block-start: 5px ridge green;</div>
<div style="border-block-start: 1px groove red;">border-block-start: 1px groove red;</div>
<div style="border-block-start: 5px groove green;">border-block-start: 5px groove green;</div>
</body>
</html>
Ứng dụng border-block-start trong thiết kế giao diện thực tế
border-block-start phù hợp khi đường viền cần bám theo hướng bắt đầu của vùng block thay vì cố định vào cạnh trên. Cách sử dụng này giúp giao diện linh hoạt hơn, đặc biệt khi thiết kế hỗ trợ nhiều hướng viết hoặc muốn quản lý bố cục theo logic thay vì vị trí vật lý.
Tạo đường phân cách giữa các khu vực nội dung
Có thể dùng border-block-start để tạo đường ngăn cách giữa các phần nội dung như danh sách, thẻ thông tin hoặc các nhóm trong trang. So với việc xác định trực tiếp cạnh trên, thuộc tính này giúp quy tắc CSS phù hợp hơn với mô hình bố cục theo hướng block.
.section {
border-block-start: 1px solid #ddd;
padding-block-start: 16px;
}
Cách kết hợp này đặc biệt hữu ích khi mỗi khu vực cần có khoảng cách rõ ràng mà không phải tạo thêm phần tử HTML chỉ để làm đường kẻ trang trí.
Kết hợp border-block-start với padding và margin
Đường viền chỉ tạo ranh giới, vì vậy nên kết hợp với padding hoặc margin để kiểm soát khoảng cách giữa đường viền và nội dung. Trong đó, padding-block-start thường phù hợp khi muốn tạo khoảng trống bên trong phần tử, còn margin-block-start dùng để tách phần tử khỏi nội dung bên ngoài.
.content {
border-block-start: 2px solid #333;
padding-block-start: 12px;
margin-block-start: 24px;
}
Cách tổ chức này giúp phần viền và khoảng cách được kiểm soát độc lập, từ đó dễ điều chỉnh giao diện khi thay đổi kích thước hoặc cấu trúc nội dung.
Tạo hiệu ứng tiêu đề và thẻ nội dung nổi bật
border-block-start có thể tạo điểm nhấn trực quan cho tiêu đề, hộp thông tin hoặc các thẻ nội dung quan trọng. Chỉ cần thay đổi độ dày, kiểu và màu viền, bạn có thể phân cấp các khu vực mà không cần thêm nhiều thành phần trang trí.
.card {
border-block-start: 4px solid #222;
padding-block-start: 14px;
}
Kiểu trình bày này thích hợp với các giao diện có nhiều khối nội dung liên tiếp, vì đường viền ở đầu mỗi khối tạo cảm giác phân chia rõ ràng nhưng vẫn giữ cấu trúc HTML gọn.
Sử dụng border-block-start cho giao diện hỗ trợ đa hướng viết
Điểm mạnh của border-block-start nằm ở khả năng hoạt động theo hướng block của phần tử. Khi giao diện thay đổi writing-mode, vị trí mà thuộc tính tác động có thể thay đổi theo hướng bố cục thay vì luôn bị khóa vào cạnh trên.
.box {
border-block-start: 1px solid #999;
padding-block-start: 10px;
}
Đây là lựa chọn đáng cân nhắc khi xây dựng giao diện cần thích ứng với nhiều cách trình bày văn bản. Thay vì phải viết lại quy tắc cho từng hướng, có thể ưu tiên các thuộc tính CSS logic như border-block-start để mã nguồn nhất quán và dễ bảo trì hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-block-start 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 *
