CSS column-rule-style Property
Last Updated :
13 Jun, 2023
The column-rule-style property in CSS is used to set the style of the column rule between the columns on a multi-column layout.
Syntax:
column-rule-style: none|double|groove|ridge|inset|hidden|dotted|
dashed|solid|outset|initial|inherit
Property Values: The column-rule-style property contains many values which are listed below:
- none: It is the default value and is used to specify no rule between the columns.
- hidden: It defines the hidden rule between the columns.
- dotted: It defines the dotted rule between the columns.
- dashed: It defines the dashed rule between the columns.
- solid: It defines the solid rule between the columns.
- double: It defines the double rule between the columns.
- groove: It defines a 3D grooved rule. The effect depends on the width and color values.
- ridge: It defines a 3D ridged rule. The effect depends on the width and color values.
- inset: It defines a 3D inset rule. The effect depends on the width and color values.
- outset: It defines a 3D outset rule. The effect depends on the width and color values.
- initial: It sets the value to its default value.
- inherit: The property inherited from its parent element.
Example 1: Here is the example of the above-explained property.
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: Here is the example of the above-explained property.
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: 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: Here is the example of the above-explained property.
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: 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: The browser supported by column-rule-style property are listed below:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...