
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Set the style of the rule between columns with CSS
To set the style of the rule between columns, use the column-rule-style property. You can try to run the following code to implement the column-rule-style property.
Example
<!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; } </style> </head> <body> <div class = "demo"> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> </body> </html>
- Related Articles
- Set the color of the rule between columns with CSS
- Set the width of the rule between columns with CSS
- How to set the style of the rule between columns with JavaScript?
- How to set the color of the rule between columns with JavaScript?
- How to set the width of the rule between columns with JavaScript?
- Set the style of the border with CSS
- Set the font style with CSS
- Set the size of the gap between CSS grid columns
- Set the line style for the outline with CSS
- Set style for pagination with CSS
- How to set length to set the gap between the columns in CSS?
- Specify the gap between the columns with CSS
- Set image for bullet style with CSS
- Set outline style as ridge with CSS
- Set the style of the bottom border using CSS

Advertisements