CSS - column-rule-style Property

Quiz

CSS column-rule-style property sets the style of the line that is drawn between the columns in a multi-column layout.

Syntax

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

Value	Description
none	It specifies no rule. Default value.
hidden	It specifies a hidden rule.
dotted	It specifies a dotted rule.
dashed	It specifies a dashed rule.
solid	It specifies a solid rule.
double	It specifies a double rule.
groove	It specifies a 3D grooved rule. Effect depends on width and color values.
ridge	It specifies a 3D ridged rule. Effect depends on the width and color values.
inset	It specifies a 3D inset rule. Effect depends on the width and color values.
outset	It specifies a 3D outset rule. Effect depends on the width and color values.
initial	It sets the property to the default value.
inherit	It inherits the property from the parent element.

Examples of CSS Column Rule Style Property

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

Column Rule Style Property with None Value

To not have any rule between the columns, we use the none 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: 5px;
         column-rule-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: none 
   </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 Style Property with Hidden Value

To have a transparent rule between columns, we use the hidden value. The only difference between this value and none is that, hidden creates a transparent rule while none does not create any rule. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-color: yellow;
         column-rule-width: 8px;
         column-rule-style: hidden;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: hidden 
   </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 Style Property with Dotted Value

To have a dotted rule between the columns, we use the dotted 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: 5px;
         column-rule-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: dotted 
   </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 Style Property with Dashed Value

To have a dashed rule between the columns, we use the dashed 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: 5px;
         column-rule-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: dashed 
   </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 Style Property with Solid Value

To have a solid rule between the columns, we use the solid 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: 5px;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: solid 
   </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 Style Property with Double Value

To have a double rule between the columns, we use the double 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: 5px;
         column-rule-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: double 
   </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 Style Property with Groove Value

To have a groove rule between the columns, we use the groove 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-color: yellow;
         column-rule-width: 8px;
         column-rule-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: groove 
   </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 Style Property with Ridge Value

To have a ridge rule between the columns, we use the ridge 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-color: yellow;
         column-rule-width: 8px;
         column-rule-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: ridge 
   </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 Style Property with Inset Value

To have a inset rule between the columns, we use the inset 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-color: yellow;
         column-rule-width: 8px;
         column-rule-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: inset
   </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 Style Property with Outset Value

To have a outset rule between the columns, we use the outset 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-color: yellow;
         column-rule-width: 8px;
         column-rule-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: outset 
   </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-style	50.0	10.0	52.0	9.0	37.0

css_reference.htm

Print Page