Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Setting Column Rules in CSS3

CSS Web Development Front End Technology

The CSS column-rule property is used to create visual separators between columns in a multi-column layout. It allows you to set the width, style, and color of the rule that appears between columns.

Syntax

/* Shorthand property */
column-rule: width style color;

/* Individual properties */
column-rule-width: value;
column-rule-style: value;
column-rule-color: value;

Possible Values

Property Values Description
column-rule-width thin | medium | thick | length Sets the width of the column rule
column-rule-style none | solid | dotted | dashed | double Sets the style of the column rule
column-rule-color color values Sets the color of the column rule

Method 1: Using Shorthand Property

The shorthand column-rule property allows you to set all three properties in a single declaration −

<!DOCTYPE html>
<html>
<head>
<style>
    .demo {
        column-count: 3;
        column-gap: 40px;
        column-rule: 5px dotted orange;
        text-align: justify;
        padding: 20px;
    }
</style>
</head>
<body>
    <h1>Web Development</h1>
    <div class="demo">
        Web development is the process of creating websites and web applications. It involves various technologies including HTML for structure, CSS for styling, and JavaScript for interactivity. Modern web development also includes frameworks and libraries that make development faster and more efficient. Responsive design ensures websites work well on all devices, from desktop computers to mobile phones.
    </div>
</body>
</html>

Text is displayed in three columns with orange dotted lines (5px width) separating each column.

Method 2: Using Individual Properties

You can also set each column rule property separately for more precise control −

<!DOCTYPE html>
<html>
<head>
<style>
    .demo {
        column-count: 4;
        column-gap: 30px;
        column-rule-width: 3px;
        column-rule-style: double;
        column-rule-color: blue;
        text-align: justify;
        padding: 20px;
    }
</style>
</head>
<body>
    <h1>Machine Learning</h1>
    <div class="demo">
        Machine learning is a subset of artificial intelligence that enables computers to learn and make decisions without being explicitly programmed. It uses algorithms to analyze data, identify patterns, and make predictions. Common applications include recommendation systems, image recognition, and natural language processing. Popular frameworks include TensorFlow, PyTorch, and scikit-learn.
    </div>
</body>
</html>

Text is displayed in four columns with blue double-line borders (3px width) separating each column.

Conclusion

The column-rule property provides an effective way to visually separate columns in multi-column layouts. Use the shorthand property for quick styling or individual properties for precise control over each aspect of the column rule.

Updated on: 2026-03-15T13:47:29+05:30

242 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements