CSS | column-rule-style Property
The column-rule-style property in CSS is used to set the style of the column rule between the columns on a multi-column layout.
Syntax:
column-rule-style: none|double|groove|ridge|inset|hidden|dotted| dashed|solid|outset|initial|inherit
Property Values: The column-rule-style property contains many values which are listed below:
- none: It is the default value and used to specify no rule between the columns.
- hidden: It defines the hidden rule between the columns.
- dotted: It defines the dotted rule between the columns.
- dashed: It defines the dashed rule between the columns.
- solid: It defines the solid rule between the columns.
- double: It defines the double rule between the columns.
- groove: It defines a 3D grooved rule. The effect depends on the width and color values.
- ridge: It defines a 3D ridged rule. The effect depends on the width and color values.
- inset: It defines a 3D inset rule. The effect depends on the width and color values.
- outset: It defines a 3D outset rule. The effect depends on the width and color values.
- initial: It sets the value to its default value.
- inherit: The property inherited from its parent element.
Example 1:
html
<!DOCTYPE html><html> <head> <title> CSS | column-rule-style Property </title> <style> .geeks { /* Chrome, Safari, Opera */ -webkit-column-count: 3; -webkit-column-gap: 35px; -moz-column-rule-style: dashed; /* Firefox */ -moz-column-count: 3; -moz-column-gap: 35px; -moz-column-rule-style: dashed; column-count: 3; column-gap: 35px; column-rule-style: dashed; } </style> </head> <body> <h1 style = "text-align:center;color:green;"> GeeksforGeeks </h1> <div class = "geeks"> 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:
Example 2:
html
<!DOCTYPE html><html> <head> <title> CSS | column-rule-style Property </title> <style> .geeks { /* Chrome, Safari, Opera */ -webkit-column-count: 3; -webkit-column-gap: 35px; -moz-column-rule-style: double; /* Firefox */ -moz-column-count: 3; -moz-column-gap: 35px; -moz-column-rule-style: double; column-count: 3; column-gap: 35px; column-rule-style: double; } </style> </head> <body> <h1 style = "text-align:center;color:green"> GeeksforGeeks </h1> <div class = "geeks"> 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:
Example 3:
html
<!DOCTYPE html><html> <head> <title> CSS | column-rule-style Property </title> <style> .geeks { /* Chrome, Safari, Opera */ -webkit-column-count: 3; -webkit-column-gap: 35px; -moz-column-rule-style: groove; /* Firefox */ -moz-column-count: 3; -moz-column-gap: 35px; -moz-column-rule-style: groove; column-count: 3; column-gap: 35px; column-rule-style: groove; } </style> </head> <body> <h1 style = "text-align:center;color:green"> GeeksforGeeks </h1> <div class = "geeks"> 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-style property are listed below:
- Google Chrome 50.0
- Edge 12.0
- Internet Explorer 10.0
- Firefox 52.0
- Safari 9.0
- Opera 11.1
Please Login to comment...