The column-rule-width property in CSS is used to change the width of the column rule i.e., the vertical lines between the columns.
Syntax:
column-rule-width: length|thin|medium|thick|initial|inherit;
Default Value: medium
Property Values:
- thin: It is used to set a thin rule between the columns.
- medium: It is used to create a medium width rule between the columns. It is the default width.
- thick: It creates a thick width rule between the columns.
- length: It is used to set the width by length. It does not take a negative value.
- initial: It is used to set column-rule-width property to its default value.
- inherit: This property is inherited from its parent.
Example: Here is an example of the above-explained property.
html
<!DOCTYPE html><html>
<head>
<title>
column-rule-width property
</title>
<!-- column-rule-width CSS property -->
<style>
.length {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: 10px;
text-align: justify;
}
.thin {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: thin;
text-align: justify;
}
.thick {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: thick;
text-align: justify;
}
.medium {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: medium;
text-align: justify;
}
.initial {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: initial;
text-align: justify;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<!-- column-rule-width: length; property -->
<h2>column-rule-width: length;</h2>
<div class="length">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: thin; property -->
<h2>column-rule-width: thin;</h2>
<div class="thin">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: thick; property -->
<h2>column-rule-width: thick;</h2>
<div class="thick">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: medium; property -->
<h2>column-rule-width: medium;</h2>
<div class="medium">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: initial; property -->
<h2>column-rule-width: initial;</h2>
<div class="initial">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by column-rule-width property are listed below:
- Google Chrome 50.0 and above
- Edge 12.0 and above
- Internet Explorer 10.0 and above
- Firefox 52.0 and above
- Safari 9.0 and above
- Opera 11.1 and above