Tillitsdone
down Scroll to discover

CSS column-rule-style Customize Multi-Column Layouts

CSS column-rule-style enhances multi-column layouts by customizing the line style between columns.

Options include solid, dashed, dotted, and more.

Improve readability and aesthetics.
thumbnail

Introduction

The column-rule-style property in CSS lets you customize the style of the line that separates columns in a multi-column layout. This property enhances readability and visual appeal. You can choose from various styles like solid, dashed, dotted, double, and more.

Syntax

/* Basic border-style values */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;


/* Global values */
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: revert;
column-rule-style: revert-layer;
column-rule-style: unset;

Values

  • none: No line is drawn.
  • hidden: The line is hidden.
  • dotted: The line is a series of dots.
  • dashed: The line is a series of dashes.
  • solid: The line is a solid, continuous line.
  • double: The line is double.
  • groove: The line has a 3D grooved effect.
  • ridge: The line has a 3D ridged effect.
  • inset: The line has a 3D inset effect.
  • outset: The line has a 3D outset effect.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property from its parent element.
  • revert: Reverts the property to the default value as specified by the browser.
  • revert-layer: Reverts the property to its previous value in the cascade.
  • unset: Resets the property to its natural value (inherited or initial).

Formal Definition

Propertycolumn-rule-style
Initial Valuenone
Applies ToMulti-column elements
InheritedNo
Computed ValueAs specified
Animation TypeDiscrete

Formal Syntax

column-rule-style =
  <line-style>


<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Examples

Setting a Dashed Column Rule

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: dashed;
}

Result

The text will be divided into three columns with a dashed line separating them.

Setting a Double Column Rule

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: double;
}

Result

The text will be divided into three columns with a double line separating them.

Setting a Groove Column Rule

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: groove;
}

Result

The text will be divided into three columns with a groove-styled line separating them.

Setting a Ridge Column Rule

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS column-rule-style Property</title>
    <style>
        .ridge-rule {
            column-count: 3;
            column-rule-style: ridge;
            column-rule-width: 2px;
            column-rule-color: grey;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;color:green;">Website</h1>
    <div class="ridge-rule">
        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>

Result

The text will be divided into three columns with a ridge-styled line separating them.

Setting an Inset Column Rule

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS column-rule-style Property</title>
    <style>
        .inset-rule {
            column-count: 3;
            column-rule-style: inset;
            column-rule-width: 2px;
            column-rule-color: blue;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;color:green;">Website</h1>
    <div class="inset-rule">
        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>

Result

The text will be divided into three columns with an inset-styled line separating them.

Setting an Outset Column Rule

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS column-rule-style Property</title>
    <style>
        .outset-rule {
            column-count: 3;
            column-rule-style: outset;
            column-rule-width: 2px;
            column-rule-color: red;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;color:green;">Website</h1>
    <div class="outset-rule">
        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>

Result

The text will be divided into three columns with an outset-styled line separating them.

Setting a Dotted Column Rule

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS column-rule-style Property</title>
    <style>
        .dotted-rule {
            column-count: 3;
            column-rule-style: dotted;
            column-rule-width: 2px;
            column-rule-color: black;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;color:green;">Website</h1>
    <div class="dotted-rule">
        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>

Result

The text will be divided into three columns with a dotted line separating them.

Specifications

The column-rule-style property is defined in the CSS Multi-column Layout Module Level 1 specification. This module provides the rules and guidelines for creating and styling multi-column layouts in web development.

Key Specifications:

  • CSS Multi-column Layout Module Level 1: This specification outlines the behavior and properties related to multi-column layouts, including the column-rule-style property.

For more detailed information, refer to the official documentation:

Browser Compatibility

The column-rule-style property is widely supported across modern web browsers. Here’s an overview of the browser compatibility:

Compatibility Table

BrowserVersionSupport Started
Google Chrome50.0April 2016
Mozilla Firefox52.0March 2017
Microsoft Edge10.0September 2012
Opera37.0May 2016
Safari9.0September 2015

Notes on Browser Compatibility

  • Google Chrome: Supported since version 50.0 (April 2016).
  • Mozilla Firefox: Supported since version 52.0 (March 2017).
  • Microsoft Edge: Supported since version 10.0 (September 2012).
  • Opera: Supported since version 37.0 (May 2016).
  • Safari: Supported since version 9.0 (September 2015).

Ensuring Compatibility

To ensure your multi-column layouts work across all browsers, test your web pages on multiple browsers and versions. This helps identify any potential issues and ensures a consistent user experience.

You can also use feature detection or polyfills to provide fallback support for older browsers.

Conclusion

The column-rule-style property is a valuable tool for enhancing the visual appeal of multi-column layouts. With broad support across modern browsers, you can confidently use this property to create visually engaging and functional web designs. By understanding browser compatibility and adhering to best practices, you can ensure that your multi-column layouts are both user-friendly and visually appealing.

FAQs

What is the column-rule-style property in CSS?

The column-rule-style property in CSS specifies the style of the line between columns in a multi-column layout. It defines whether the divider is solid, dashed, dotted, or another style.

What are the possible values for column-rule-style?

The column-rule-style property supports values like solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden. Each value creates a different visual effect for the column divider.

How do I apply a dashed column rule style?

You can create a dashed column divider using: column-rule-style: dashed;. This applies a dashed line between the columns.

Can I set different styles for each column divider?

No, the column-rule-style property applies the same style to all column dividers. You cannot vary the style between columns.

What happens if I don’t specify a column-rule-style?

If no column-rule-style is specified, the rule between columns won’t be visible, even if you set a width and color. The style must be defined for the rule to render.

Which browsers support the column-rule-style property?

The column-rule-style property is supported by modern browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Safari.

How can I ensure browser compatibility for column-rule-style?

To ensure compatibility, test your web pages on multiple browsers and versions. You can also use feature detection or polyfills to provide fallback support for older browsers.

Can the column-rule-style property be animated?

The column-rule-style property cannot be smoothly animated between different states. Its animation type is discrete.

How does the column-rule-style property enhance web design?

The column-rule-style property enhances the visual appeal of multi-column layouts by allowing you to customize the appearance of the column rules. This can improve readability and create a more visually engaging design.

What are some best practices for using column-rule-style?

Some best practices include testing on multiple browsers, using feature detection for fallbacks, and considering the overall design aesthetic when choosing a column rule style. Ensure that the chosen style enhances readability and aligns with the design goals.

Supported Browsers

The column-rule-style property is widely supported across modern web browsers, making it a reliable choice for creating visually appealing multi-column layouts. Here is a list of the browsers that support this property:

Supported Browsers

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Opera
  • Safari

Browser Compatibility Details

  • Google Chrome: Supported since version 50.0, released in April 2016.
  • Mozilla Firefox: Supported since version 52.0, released in March 2017.
  • Microsoft Edge: Supported since version 10.0, released in September 2012.
  • Opera: Supported since version 37.0, released in May 2016.
  • Safari: Supported since version 9.0, released in September 2015.

Ensuring Compatibility

To ensure that your multi-column layouts with custom column rules work across all browsers, it’s a good practice to test your web pages on multiple browsers and versions. This helps identify any potential issues and ensures a consistent user experience.

Additionally, you can use feature detection or polyfills to provide fallback support for older browsers that may not fully support the column-rule-style property.

Conclusion

The column-rule-style property is a powerful tool for enhancing the visual appeal of multi-column layouts. With broad support across modern browsers, you can confidently use this property to create visually engaging and functional web designs. By understanding the browser compatibility and adhering to best practices, you can ensure that your multi-column layouts are both user-friendly and visually appealing.

Using column-rule-style

The column-rule-style property in CSS is a versatile tool for customizing the appearance of column rules in a multi-column layout. By specifying the style of the line drawn between columns, you can enhance the visual appeal and readability of your web content. Here’s a guide on how to use the column-rule-style property effectively.

Basic Usage

To use the column-rule-style property, you need to apply it to an element that uses a multi-column layout. This can be done by setting the column-count property to define the number of columns and then specifying the column-rule-style to customize the line between the columns.

Example

Let’s look at a practical example to illustrate how to use the column-rule-style property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS column-rule-style Property</title>
    <style>
        .geeks {
            column-count: 3;
            column-rule-style: dashed;
            column-rule-width: 2px;
            column-rule-color: grey;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;color:green;">Website</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>

Explanation

In this example:

  • The column-count property is set to 3, creating three columns.
  • The column-rule-style property is set to dashed, creating a dashed line between the columns.
  • The column-rule-width property is set to 2px, defining the width of the dashed line.
  • The column-rule-color property is set to grey, specifying the color of the dashed line.

Customizing Column Rules

You can customize the column rules further by using different values for the column-rule-style property. Here are some additional examples:

Solid Column Rule

.solid-rule {
    column-count: 3;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: black;
}

Double Column Rule

.double-rule {
    column-count: 3;
    column-rule-style: double;
    column-rule-width: 3px;
    column-rule-color: blue;
}

Groove Column Rule

.groove-rule {
    column-count: 3;
    column-rule-style: groove;
    column-rule-width: 2px;
    column-rule-color: green;
}

Tips for Using column-rule-style

  1. Consistency: Ensure that the column rule style matches the overall design aesthetic of your web page.
  2. Readability: Choose a style that enhances readability without being too distracting.
  3. Browser Compatibility: Test your multi-column layouts on different browsers to ensure consistent appearance.
  4. Fallbacks: Use feature detection or polyfills to provide fallback support for older browsers that may not fully support the column-rule-style property.

Conclusion

The column-rule-style property is a valuable tool for enhancing the visual appeal of multi-column layouts. By customizing the style of the column rules, you can create visually engaging and functional web designs. With broad support across modern browsers, you can confidently use this property to improve the readability and aesthetics of your web content.

By following these guidelines and examples, you can effectively use the column-rule-style property to create visually appealing and functional multi-column layouts in your web development projects.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
CSS property CSS animation
css_property_cover/css-property-column-rule.png CSS Column-Rule Customize Multi-Column Layouts CSS column-rule property enhances multi-column layouts by customizing the dividing lines. Options include width, style, and color for better visual separation. css_property_cover/css-property-background-clip.png CSS Background-Clip Enhance Your Web Design Discover the CSS background-clip property for stunning web designs. Control background extent using options like border-box, padding-box, content-box, and text. css_property_cover/css-property-background-repeat.png CSS Background-Repeat A Comprehensive Guide Discover how to use CSS background-repeat for web design. Control image repetition with options like repeat, no-repeat, space, and round. css_property_cover/css-property-border-image.png CSS Border-Image Enhance Design with Custom Borders Learn how to use the CSS border-image property to create visually appealing custom borders. Explore options like source, slice, width, outset, and repeat for unique designs. css_property_cover/css-property-border-spacing.png CSS Border-Spacing Enhance Table Layout CSS border-spacing enhances table layout by controlling the spacing between cells. Available options include single length values, horizontal and vertical lengths, and global values. Learn how to use this property effectively. css_property_cover/css-property-column-width.png CSS Column-Width A Comprehensive Guide The CSS column-width property sets the ideal width for columns in a multi-column layout. Learn how to use it to create responsive designs and explore available options.
View all 337 CSS blogs
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
down Explore our best articles, cover a wide variety of technologies
Our knowledge base
209 Articles
Explore right
icons/logo-react.svg ReactJs
Popular JavaScript library for building user interfaces with a component-based architecture.
169 Articles
Explore right
icons/flutter.svg Flutter
UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
150 Articles
Explore right
icons/logo-nodejs.svg Nodejs
JavaScript runtime for building scalable, high-performance server-side applications.
60 Articles
Explore right
icons/next-js.svg Nextjs
React framework enabling server-side rendering and static site generation for optimized performance.
40 Articles
Explore right
icons/code-outline.svg Typescript
Superset of JavaScript adding static types for improved code quality and maintainability.
39 Articles
Explore right
icons/tailwind.svg TailwindCSS
Utility-first CSS framework for rapid UI development.
130 Articles
Explore right
icons/code-outline.svg Golang
Programming language known for its simplicity, concurrency model, and performance.
70 Articles
Explore right
icons/code-outline.svg AstroJs
Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.
40 Articles
Explore right
icons/code-outline.svg Jest
Versatile testing framework for JavaScript applications supporting various test types.
337 Articles
Explore right
icons/css-4.svg CSS
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
DesignRush web design companies DesignRush
web design companies Goodfirms Goodfirms
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.