How to use CSS3 column-rule-width Property

column-rule-width is pretty new property in Cascading Style Sheet styling system Level 3. It’s used to create multicolumn module by a single line. I am gonna show you how o use column-rule-width.

How to use it:

<html>
<head>
    <style type="text/css">

        .multicolumn{
            columns: 180px 3;
            -moz-columns: 180px 3;
            -webkit-columns: 180px 3;
        }

    </style>
</head>
<body>

<p class="multicolumn">
     Lorem Ipsum sample text Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text

</p>

</body>
</html>

You can also add some other properties like.

.multicolumn{
  columns: 180px 3;
  -moz-columns: 180px 3;
  -webkit-columns: 180px 3;

  column-rule-color: #ccc;
  -moz-column-rule-color: #ccc;
  -webkit-column-rule-color: #ccc;

  column-rule-style: solid;
  -moz-column-rule-style: solid;
  -webkit-column-rule-style: solid;
  }

This is really awesome properties of CSS3

 

Published by

Sohel Rana

PHP Programmer, Software Engineer & Technology lover

Leave a Reply

Your email address will not be published. Required fields are marked *