CSS column-rule-style Property
The column-rule-style specifies the style of the rule between columns. A column-rule is similar to a border that you can add to separate adjacent columns. It can also have styles like a border.
This property is one of the CSS3 properties.
To use this property, you must first define columns using the columns or column-count properties.
The column-rule-style property has the following values:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
| Initial Value | none |
|---|---|
| Applies to | Multicol elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.columnRuleStyle = "dashed" ; |
Syntax
Syntax of CSS column-rule-style Property
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Example of the column-rule-style property:
Example of CSS column-rule-style Property with dotted value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Column-rule-style property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Result
In the following example, the rules between columns are double. In this example the color is specified for the rule with the column-rule-color property.
Example of the column-rule-style property with the "double" value:
Example of CSS column-rule-style Property with double value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: double;
column-rule-color: #1c87c9;
column-rule-width: 5px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-style property example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| none | No rule is defined. This is the default value. |
| hidden | Rule is hidden. |
| dotted | Rule is dotted. |
| dashed | Rule is dashed. |
| solid | Rule is solid. |
| double | Rule is double. |
| groove | Rule is 3D groove. Width and color values define the effect. |
| ridge | Rule is 3D ridge. Width and color values define the effect. |
| inset | Rule is 3D inset. Width and color values define the effect. |
| outset | Rule is 3D outset. Width and color values define the effect. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Practice
Which of the following statements are true about the CSS column-rule-style property?