The column-rule property in CSS is used to specify the width, style, and color of the rules between the columns.
Syntax:
column-rule: column-rule-width column-rule-style column-rule-color|
initial|inherit;Property Values:
- column-rule-width: This value is used to set the width of the rule between the columns. The default value of this property-value is medium.
- column-rule-style: This value is used to set the style of the rule between columns. The default value of this property-value is none.
- column-rule-color: This value is used to set the color of the rule between columns. The default value of this property value is the color of the element.
- initial: This value is used to set the default value of this column-rule property.
- inherit: This value tells the column-rule property to inherit the property from its parent.
Example:
html
<!DOCTYPE html><html>
<head>
<title>The column-rule Property</title>
<style>
.gfg {
-webkit-column-count: 3;
-moz-column-count: 3 column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px double #ff00ff;
-moz-column-rule: 4px double #ff00ff;
column-rule: 4px double #ff00ff;
}
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
The column-rule Property
</h2>
<p>
The column-rule property sets the width, style,
and color of the rule between the columns of
the element:
</p>
<div class="gfg">
The course is designed for students
as well as working professionals to prepare
for coding interviews. This course is going
to have coding questions from school level
to the level needed for product based companies
like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by column-rule Property are listed below;
- Google Chrome: 50.0 and above
- Edge 12.0 and above
- Internet Explorer: 10.0 and above
- Firefox: 52.0 and above
- Opera: 11.1 and above
- Safari: 9.0 and above