CSS | column-rule-width Property
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 takes 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:
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
Please Login to comment...