column-rule-style
Definition
The column-rule-style CSS property sets the style of the dividing lines (rules) between columns in a multi-column layout.
Examples
Specifies the rule style as a solid line:
column-rule-style: solid;
Specifies the rule style as a series of dots:
column-rule-style: dotted;
Specifies the rule style as two parallel lines:
column-rule-style: double;
Values
| Value | Description |
|---|---|
| none | No rule is displayed. |
| hidden | Same as "none". |
| dotted | Specifies a dotted line. |
| dashed | Specifies a dashed line. |
| solid | Specifies a solid line. |
| double | Specifies two parallel lines. |
| groove | Specifies a 3D groove. |
| ridge | Specifies a 3D ridge. |
| inset | Specifies a 3D inset. |
| outset | Specifies a 3D outset. |
| initial | Specifies the default value. |
| inherit | Specifies that the value should be inherited from the parent element. |
Best Practices
- Choose a column-rule-style that enhances the readability of the content and fits the overall design of the layout.
- Consider using media queries to adjust the column-rule-style based on the screen size.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |