Thuộc tính column-rule trong CSS
Bùi Tấn Lực - 854
- 16/10/2025
Chức năng của Thuộc tính column-rule trong CSS
Thuộc tính column-rule trong CSS dùng để quy định chiều rộng, kiểu, màu sắc cho đường kẻ phân chia các cột trong bố cục có nhiều cột.
Cú pháp của Thuộc tính column-rule trong CSS
column-rule: column-rule-width column-rule-style column-rule-color
column-rule-width: Chiều rộng của đường kẻ (ví dụ: 1px, 5px)
column-rule-style: kiểu đường kẻ (dotted, dashed, solid, double, groove, ridge, inset, outset)
column-rule-color: Màu sắc (#ddd, red)
Code Thuộc tính column-rule trong CSS
column-rule: 1px solid #ddd; Độ rộng 1px, kiểu solid, màu #ddd(xám)
column-rule: 5px double red; Độ rộng 5px, kiểu double, màu red(đỏ)
column-rule: 5px dashed red; Độ rộng 5px, kiểu dashed, màu red(đỏ)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-rule trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{width:100%; height:auto; margin-bottom:10px; column-count: 3; column-gap: 40px;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-rule trong CSS</h1>
<p>column-rule: column-rule-width column-rule-style column-rule-color</p>
<h4>column-rule: 1px solid #ddd; Độ rộng 1px, kiểu solid, màu #ddd(xám)</h4>
<div class="divcha" style="column-rule: 1px solid #ddd;">
Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule: 5px double red; Độ rộng 5px, kiểu double, màu red(đỏ)</h4>
<div class="divcha" style="column-rule: 5px double red;">
Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule: 5px dashed red; Độ rộng 5px, kiểu dashed, màu red(đỏ)</h4>
<div class="divcha" style="column-rule: 5px dashed red;">
Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
</body>
</html>
Ứng dụng Thuộc tính column-rule trong bố cục CSS nhiều cột
Khi nội dung được chia thành nhiều cột, column-rule giúp tạo đường phân cách trực quan giữa các cột mà không cần chèn thêm phần tử HTML. Cách này phù hợp với các khu vực chứa văn bản dài, giúp người đọc dễ nhận biết ranh giới giữa từng phần nội dung.
Tạo đường phân cách giữa các cột nội dung
Chỉ cần kết hợp column-rule với thuộc tính tạo cột, bạn có thể bổ sung đường kẻ nằm giữa các cột một cách gọn gàng. Kiểu đường kẻ, độ dày và màu sắc có thể thay đổi để phù hợp với giao diện tổng thể.
.noidung {
column-count: 2;
column-rule: 1px solid #d8d2c5;
}
Cách triển khai này đặc biệt hữu ích khi trình bày bài viết có nhiều đoạn văn liên tục. Đường kẻ chỉ đóng vai trò phân tách thị giác, không làm thay đổi nội dung hay cấu trúc của văn bản.
Kết hợp column-rule với column-gap để bố cục cân đối
column-rule chỉ tạo đường phân cách, còn khoảng cách giữa các cột được kiểm soát bởi column-gap. Vì vậy, nên điều chỉnh cả hai để đường kẻ không nằm quá sát phần chữ.
.noidung {
column-count: 2;
column-gap: 30px;
column-rule: 1px solid #d8d2c5;
}
Khoảng cách hợp lý giúp nội dung ở hai bên đường kẻ có đủ khoảng thở, từ đó bố cục trông thoáng và dễ đọc hơn. Với giao diện có nền sáng, đường kẻ mảnh và màu nhẹ thường tạo cảm giác tinh tế hơn so với đường viền quá đậm.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-rule 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 *
