Setting Column Rules in CSS3

To set column rules, you can use the shorthand column-rule property, which allows you to set the following properties −

column-rule-width: set the width of the rule between columns
column-rule-style: set the style of the rule between columns
column-rule-color: set the rule of the rule between columns

The value for column rules can be set as −

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

Also, the properties can be used separately. We will see both the examples.

Column-rule shorthand property

In this example, we have set the column-rule using the shorthand property −

column-rule: 5px dotted orange;

The above will set the width of the rule to 5px, style to dotted and color orange.

Example

Let us now see an example −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 5;
         -webkit-column-count: 5; /* Chrome, Safari, Opera */
         -moz-column-count: 5; /* Firefox */
         -webkit-column-gap: normal; /* Chrome, Safari, Opera */
         -moz-column-gap: normal; /* Firefox */
         column-gap: normal;
         -webkit-column-rule: 5px dotted orange; /* Chrome, Safari, Opera */
         -moz-column-rule: 5px dotted orange; /* Firefox */
         column-rule: 5px dotted orange;
      }
   </style>
</head>
<body>
   <h1>PyTorch</h1>
   <div class="demo">
      PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber’s Pyro software for probabilistic programming which is built on it.
      Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
      PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
   </div>
</body>
</html>

Set the column rule

Let us see an example wherein we are using all the properties used to set the column rule in place of the shorthand property. This sets the column rule width, color, and style −

column-rule-width: 5px;
column-rule-color: blue;
column-rule-style: double;

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 4;
         -webkit-column-count: 4; /* Chrome, Safari, Opera */
         -moz-column-count: 4; /* Firefox */
         -webkit-column-gap: normal; /* Chrome, Safari, Opera */
         -moz-column-gap: normal; /* Firefox */
         column-gap: normal;
         -webkit-column-rule-width: 5px; /* Chrome, Safari, Opera */
         -moz-column-rule-width: 5px; /* Firefox */
         column-rule-width: 5px;
         -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
         -moz-column-rule-color: blue; /* Firefox */
         column-rule-color: blue;
         -webkit-column-rule-style: double; /* Chrome, Safari, Opera */
         -moz-column-rule-style: double; /* Firefox */
         column-rule-style: double;
      }
   </style>
</head>
<body>
   <h1>PyTorch</h1>
   <div class="demo">
      PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber’s Pyro software for probabilistic programming which is built on it.
      Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
      PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
   </div>
</body>
</html>

Updated on: 27-Dec-2023

91 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements