CSS - column-rule-width Property

Quiz

CSS column-rule-width property sets the width of the line that is drawn between the columns in a multi-column layout. The column-rule-style must be declared to use this property.

Syntax

column-rule-width: medium | thin | thick | length | initial | inherit;

Property Values

Value	Description
medium	It sets a medium width rule. Default.
thin	It sets a thin width rule.
thick	It sets a thick width rule.
length	Thickness of rule can be given in the form of value.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Column Rule Width Property

The following examples explain the column-rule-width property with different values.

Column Rule Width Property with Medium Value

To set a medium width to the rule, we use the medium value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: medium;
         column-rule-style: solid;

      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: medium value
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

Column Rule Width Property with Thin Value

To set a thin width to the rule, we use the thin value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: thin;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: thin value
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

Column Rule Width Property with Thick Value

To set a thick width to the rule, we use the thick value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: thick;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: thick value
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

Column Rule Width Property with Length Values

To define the thickness of the rule as per our choice, we can specify the thickness in length values (e.g. 10px, 20px etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: 10px;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: 10px 
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

Supported Browsers

Property
column-rule-width	50.0	10.0	52.0	9.0	37.0

css_reference.htm

Print Page