rick@tillitsdone.com

+66824564755

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.

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

Property	`column-rule-style`
Initial Value	`none`
Applies To	Multi-column elements
Inherited	No
Computed Value	As specified
Animation Type	Discrete

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:

CSS Multi-column Layout Module Level 1

Browser Compatibility

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

Compatibility Table

Browser	Version	Support Started
Google Chrome	50.0	April 2016
Mozilla Firefox	52.0	March 2017
Microsoft Edge	10.0	September 2012
Opera	37.0	May 2016
Safari	9.0	September 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`

Consistency: Ensure that the column rule style matches the overall design aesthetic of your web page.
Readability: Choose a style that enhances readability without being too distracting.
Browser Compatibility: Test your multi-column layouts on different browsers to ensure consistent appearance.
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.

Latest Blogs

Discover our top articles, selected to support the growth of your business.

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F10%2FTill-its-done_SEO_R43_Sep_1440x697.jpg@webp

สร้างเว็บไซต์ 1 เว็บ ต้องใช้งบเท่าไหร่? เจาะลึกทุกองค์ประกอบ website development cost อยากสร้างเว็บไซต์แต่ไม่มั่นใจในเรื่องของงบประมาณ อ่านสรุปเจาะลึกตั้งแต่ดีไซน์, ฟังก์ชัน และการดูแล พร้อมตัวอย่างงบจริงจาก Till it’s done ที่แผนชัด งบไม่บานปลายแน่นอน

Next.js สอน 14 ขั้นตอนเบื้องต้น: สร้างโปรเจกต์แรกใน 30 นาที เริ่มต้นกับ Next.js ใน 14 ขั้นตอนเพียงแค่ 30 นาที พร้อม SSR/SSG และ API Routes ด้วยตัวอย่างโค้ดง่าย ๆ อ่านต่อเพื่อสร้างโปรเจ็กต์แรกได้ทันทีที่นี่

วิธีสมัคร Apple Developer Account เพื่อนำแอปขึ้น App Store ทีละขั้นตอน อยากปล่อยแอปบน App Store ระดับโลก มาอ่านคู่มือสมัคร Apple Developer Account พร้อมเคล็ดลับ TestFlight และวิธีอัปโหลดที่ง่ายในบทความเดียวนี้ได้เลย

TypeScript Interface คืออะไร? อธิบายพร้อมวิธีใช้และข้อแตกต่างจาก Type เรียนรู้วิธีใช้ TypeScript Interface เพื่อสร้างโครงสร้างข้อมูลที่ปลอดภัยและเข้าใจง่าย พร้อมเปรียบเทียบข้อดีข้อแตกต่างกับ Type ที่คุณต้องรู้ ถูกรวมเอาไว้ในบทความนี้แล้ว

Material-UI (MUI) คืออะไร อยากสร้าง UI สวยงามและเป็นมืออาชีพในเวลาอันรวดเร็วใช่ไหม มาทำความรู้จักกับ Material-UI (MUI) ที่ช่วยให้คุณพัฒนาแอปพลิเคชันบน React ได้ง่ายและดูดีในทุกอุปกรณ์

เปรียบเทียบ 3 วิธีติดตั้ง install node js บน Ubuntu: NVM vs NodeSource vs Official Repo แบบไหนดีที่สุด? เรียนรู้วิธีติดตั้ง Node.js บน Ubuntu ด้วย NVM, NodeSource หรือ Official Repo เลือกวิธีที่เหมาะกับความต้องการของคุณ พร้อมเปรียบเทียบ เพื่อการพัฒนาที่มีประสิทธิภาพ!

View all 1242 blogs

พูดคุยกับซีอีโอ

พร้อมที่จะสร้างเว็บ/แอปของคุณให้มีชีวิตชีวาหรือเสริมทีมของคุณด้วยนักพัฒนาชาวไทยผู้เชี่ยวชาญหรือไม่?

ติดต่อเราวันนี้เพื่อหารือเกี่ยวกับความต้องการของคุณ แล้วมาสร้างโซลูชันที่ปรับแต่งเพื่อบรรลุเป้าหมายของคุณกัน เรายินดีช่วยเหลือทุกขั้นตอน!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

144 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

58 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

38 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

36 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

126 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

67 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

38 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

16 Articles

Explore

Website development th

11 Articles

Explore

Mobile application th

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

FacebookInstagramLinkedIn

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.

Premier agency directory, awards platform, and media hub connecting brands with top agencies in software, app development

DesignRush
web design companies

Trusted B2B listing, rating, and review platform where you can explore and compare the top-ranked companies worldwide

Goodfirms

CSS column-rule-style Customize Multi-Column Layouts

Introduction

Syntax

Values

Formal Definition

Formal Syntax

Examples

Setting a Dashed Column Rule

HTML

CSS

Result

Setting a Double Column Rule

HTML

CSS

Result

Setting a Groove Column Rule

HTML

CSS

Result

Setting a Ridge Column Rule

HTML

Result

Setting an Inset Column Rule

HTML

Result

Setting an Outset Column Rule

HTML

Result

Setting a Dotted Column Rule

HTML

Result

Specifications

Key Specifications:

Browser Compatibility

Compatibility Table

Notes on Browser Compatibility

Ensuring Compatibility

Conclusion

FAQs

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

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

How do I apply a dashed column rule style?

Can I set different styles for each column divider?

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

Which browsers support the column-rule-style property?

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

Can the column-rule-style property be animated?

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

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

Supported Browsers

Supported Browsers

Browser Compatibility Details

Ensuring Compatibility

Conclusion

Using column-rule-style

Basic Usage

Example

HTML

Explanation

Customizing Column Rules

Solid Column Rule

Double Column Rule

Groove Column Rule

Tips for Using column-rule-style

Conclusion

พูดคุยกับซีอีโอ

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

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

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

Which browsers support the `column-rule-style` property?

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

Can the `column-rule-style` property be animated?

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

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

Using `column-rule-style`

Tips for Using `column-rule-style`