CSS column-rule-width Control Column Line Width

Description

The column-rule-width property in CSS sets the width of the line that separates columns in a multi-column layout. This property is useful for making content look organized and easy to read. You can use different units like pixels (px) or em, and predefined keywords like thin, medium, and thick to customize the width.

Syntax

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 1px;
column-rule-width: 2.5em;

/* Global values */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: revert-layer;
column-rule-width: unset;

Values

Keyword Values

• thin: Sets a thin rule.
• medium: Sets a medium-width rule.
• thick: Sets a thick rule.

Length Values

• <length>: Sets the width using specific units like pixels (px) or ems (em).

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its initial value (medium).
• revert: Reverts to the user agent’s default stylesheet value.
• revert-layer: Reverts to the value specified in the next layer of the cascade.
• unset: Resets the property to its natural value.

Formal Syntax

column-rule-width = <line-width>

<line-width> = [<length>] | thin | medium | thick

• <length>: A positive length value (e.g., px, em).
• thin, medium, thick: Predefined keywords for thin, medium, and thick widths.

Examples

Setting a Thin Column Rule

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thin;
}

Setting a Medium Column Rule

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: medium;
}

Setting a Thick Column Rule

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}

Setting a Column Rule with a Specific Length

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
}

Browser Compatibility

The column-rule-width property is widely supported by modern browsers, ensuring consistent user experience.

Desktop Browsers

• Google Chrome: Supported since version 50.0.
• Mozilla Firefox: Supported since version 52.0.
• Microsoft Edge: Supported since version 12.0.
• Internet Explorer: Supported since version 10.0.
• Safari: Supported since version 9.0.
• Opera: Supported since version 37.0.

Mobile Browsers

• Chrome for Android: Supported since version 50.0.
• Firefox for Android: Supported since version 52.0.
• Safari on iOS: Supported since version 9.0.
• Opera Mobile: Supported since version 37.0.
• Samsung Internet: Supported since version 4.0.

Related Properties

column-rule-style

Sets the style of the column rule (e.g., solid, dashed, dotted).

column-rule-color

Sets the color of the column rule.

column-rule

A shorthand property for setting width, style, and color of the column rule.

column-count

Specifies the number of columns.

column-width

Sets the optimal width of the columns.

column-gap

Defines the gap between columns.

column-span

Allows an element to span across multiple columns.

FAQs

What does the column-rule-width property do in CSS?

The column-rule-width property specifies the width of the line drawn between columns in a multi-column layout.

What units can be used with column-rule-width?

You can use units like px, em, rem, and keywords such as thin, medium, and thick.

How do I create a thin column rule?

To create a thin column rule, set: column-rule-width: 1px; or use the keyword thin: column-rule-width: thin;.

Can I set different widths for each column rule?

No, the column-rule-width property applies the same width to all column dividers in a multi-column layout.

What happens if column-rule-width is not defined?

If column-rule-width is not defined, the default value is medium, which is generally equivalent to about 3px. The column rule will be visible unless set to none.

How can I ensure browser compatibility for column-rule-width?

The column-rule-width property is supported by modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. Ensure you test your web designs in multiple browsers and devices to maintain consistency.

What are some related CSS properties to column-rule-width?

Related properties include column-rule-style, column-rule-color, column-rule, column-count, column-width, column-gap, and column-span. These properties help you create and customize multi-column layouts.

How do I use the column-rule shorthand property?

The column-rule property is a shorthand for setting the width, style, and color of the column rule in a single declaration. For example: column-rule: 2px solid #000;.