Thuộc tính column-rule-style trong CSS dùng để đặt kiểu đường kẻ giữa các cột.Nó áp dụng cho bố cục đa cột.
Syntax:
column-rule-style: none|double|groove|ridge|inset|hidden|dotted|
dashed|solid|outset|initial|inherit
Property Values: Thuộc tính column-rule-style chứa nhiều giá trị. Các giá trị này được liệt kê dưới đây:
- none: Đây là giá trị mặc định. Nó được dùng để chỉ định không có đường kẻ giữa các cột.
- hidden: Nó xác định đường kẻ ẩn giữa các cột.
- dotted: Nó xác định đường kẻ dạng chấm giữa các cột.
- dashed: Nó xác định đường kẻ dạng gạch ngang giữa các cột.
- solid: Nó xác định đường kẻ liền nét giữa các cột.
- double: Nó xác định đường kẻ đôi giữa các cột.
- groove: Nó xác định đường kẻ rãnh 3D. Hiệu ứng phụ thuộc vào giá trị độ rộng và màu sắc.
- ridge: Nó xác định đường kẻ gờ 3D. Hiệu ứng phụ thuộc vào giá trị độ rộng và màu sắc.
- inset: Nó xác định đường kẻ lõm 3D. Hiệu ứng phụ thuộc vào giá trị độ rộng và màu sắc.
- outset: Nó xác định đường kẻ nổi 3D. Hiệu ứng phụ thuộc vào giá trị độ rộng và màu sắc.
- initial: Nó đặt giá trị về giá trị mặc định của nó.
- inherit: Thuộc tính này được kế thừa từ phần tử cha của nó.
Example 1: Dưới đây là ví dụ về thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | column-rule-style Property
</title>
<style>
.geeks {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 35px;
-moz-column-rule-style: dashed;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 35px;
-moz-column-rule-style: dashed;
column-count: 3;
column-gap: 35px;
column-rule-style: dashed;
}
</style>
</head>
<body>
<h1 style="text-align:center;color:green;">
GeeksforGeeks
</h1>
<div class="geeks">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Output: 
Example 2: Dưới đây là ví dụ về thuộc tính đã giải thích ở trên.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | column-rule-style Property
</title>
<style>
.geeks {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 35px;
-moz-column-rule-style: double;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 35px;
-moz-column-rule-style: double;
column-count: 3;
column-gap: 35px;
column-rule-style: double;
}
</style>
</head>
<body>
<h1 style="text-align:center;color:green">
GeeksforGeeks
</h1>
<div class="geeks">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Output: 
Example 3: Dưới đây là ví dụ về thuộc tính đã giải thích ở trên.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | column-rule-style Property
</title>
<style>
.geeks {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 35px;
-moz-column-rule-style: groove;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 35px;
-moz-column-rule-style: groove;
column-count: 3;
column-gap: 35px;
column-rule-style: groove;
}
</style>
</head>
<body>
<h1 style="text-align:center;color:green">
GeeksforGeeks
</h1>
<div class="geeks">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Output: 
Supported browsers: Các trình duyệt được hỗ trợ bởi column-rule-style property được liệt kê dưới đây:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera