column-rule
Definition
The column-rule CSS shorthand property sets the width, style, and color of the dividing lines (rules) between columns in a multi-column layout.
Examples
Specifies a 1-pixel solid red line as the column rule:
column-rule: 1px solid red;
Specifies a 2-millimeter dotted black line as the column rule:
column-rule: 2mm dotted black;
Specifies a 3-point double green line as the column rule:
column-rule: 3pt double green;
Values
| Value | Description |
|---|---|
<width> | Specifies the width of the rule using a length unit (e.g. px, pt, mm, em, etc.). |
<style> | Specifies the style of the rule (e.g. solid, dotted, double, etc.). |
<color> | Specifies the color of the rule. |
initial | Specifies the default value. |
inherit | Specifies that the value should be inherited from the parent element. |
Best Practices
- Choose a column-rule that enhances the readability of the content and fits the overall design of the layout.
- Consider using media queries to adjust the column-rule based on the screen size.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |