The **`column-rule-width` property** in ﻿#key# CSS: Cascading Style Sheet #key# is used to define the width of the column rule between different columns when we are using the multi-column layout.﻿

# 
#  Syntax
```css
column-rule-width: medium|thin|thick|length|initial|inherit;
```

## Property values

- **`thin`**: used to specify that the thin rule between columns.

- **`thick`**: used to specify the thick rule between columns.
- **`length`**: used to define the thickness of the rule.

- **`medium`**: It is the default value, and is used to specify that the rule is medium. 

- **`initial`**: used to set the value to its default value.

- **`inherit`**: used to inherit property from its parent value.

##    
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the column-rule-width property.

<title>Example</title>

<div class="col">
  <p>Welcome To Educative Edpresso Shots. 
  It is a platform where you can learn different 
  types of programming skills.</p> 
  <p>You can go through
  different shots which are based on different programming
  languages to enhance your skills.</p>
</div>

.col 
{
  background: rgb(255, 255, 255);
  padding: 20px;

  column-count: 2; 
  column-rule-width: 5px;
  column-rule-style: dashed;
  column-rule-color: rgb(18, 119, 133);
}

codemirror

## Explanation

From this example, where we have set the column-rule-width property, we can see that the column is separated by a blue dashed line and that the size of one dash is set to be 5px. 

>We can also change the style, color, and width according to our own choice.

What is the CSS column-rule-width property?

Defines column rule width for multi-column layouts, with configurable thickness, style, and inheritance options. Default is medium.