How to set width style and color of rule between columns in CSS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to specify the width, style, and color of the rule between columns. To set the width and color of the rule between columns in CSS, you can use the column-rule properties. Approach: The column-rule property is used to specify the width, style, and color of the rule between columns. It takes three values width of the rule, the style of the rule, and the color of the rule. Syntax: column-rule: width style color; Example 1: In this example, we are using the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <style> .gfg { font-size: 30px; column-width: 160px; column-rule: 5px solid red; } </style> </head> <body> <div class="parent" style="width: 50%;"> <div class="gfg"> GeeksforGeeks is my favorite site where I can gain a lot of knowledge and can also share my knowledge what I have gained while learning. We can add more paragraphs for content. This is just an example to tell you how to specify the optimal width for the columns in CSS? The column width is 160px in this example. </div> </div> </body> </html> Output: Example 2: Here is another example of using column rule property. HTML <!DOCTYPE html> <html lang="en"> <head> <style> .gfg { font-size: 30px; column-width: 160px; column-rule: 5px dotted blue; } </style> </head> <body> <div class="parent" style="width: 50%;"> <div class="gfg"> GeeksforGeeks is my favorite site where I can gain a lot of knowledge and can also share my knowledge what I have gained while learning. We can add more paragraphs for content. This is just an example to tell you how to specify the optimal width for the columns in CSS? The column width is 160px in this example. </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to set the width of the bottom border in CSS ? M manikumarsingh789 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to set length to set the gap between the columns in CSS ? In this article, we will learn how to set the length that will set the gap between the columns. A web page's text content can be organized into many columns using CSS, which is a strong tool for web development. Long paragraphs of text can be divided into smaller, easier-to-read sections by using co 3 min read How to Reduce Space Between Two Columns in HTML Table ? In HTML, we can create tables with multiple columns to display data in an organized manner. Sometimes, we may want to reduce the space between two adjacent columns in a table. We can achieve this by applying CSS properties to the table elements. In this article, we will see the different approaches 3 min read How to fix the width of columns in the table ? Fixing the width of columns in a table involves setting a specific width for each column to maintain consistent sizing. This can be achieved using CSS properties like width on <th> or <td> elements, or using the <colgroup> and <col> tags to control column widths.Syntax<td 3 min read How to change the Width of a Column in Bootstrap Table ? In Bootstrap, the table is an important component used for organizing and displaying data in rows and columns. Below are the approaches to change the width of a column in the Bootstrap table: Table of Content Using Bootstrap Grid ClassesUsing width AttributeUsing Bootstrap Grid ClassesIn this approa 2 min read How to set the width of the bottom border in CSS ? In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS 2 min read How to set table column width constant regardless of the amount of text in its cells ? HTML tables are a great way to create tabular layouts for the web page so that the user can access the data in tabular format as it is a much more user-friendly way to present a certain type of data. In this article, we will see how we can set the column width of a table to a fixed width that does n 3 min read Like