CSS3 Column Rules Examples

First Page
Next Page

CSS3 Column Rules

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 multi-column layouts Examples</title>
      <style type="text/css">
         p {
            -webkit-column-count: 3;
            -webkit-column-gap: 100px;
            -webkit-column-rule: 2px solid red;
            -moz-column-count: 3;
            -moz-column-gap: 100px;
            -moz-column-rule: 2px solid red;
            column-count: 3;
            column-gap: 100px;
            column-rule: 2px solid red;  
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..</p>
   </body>
</html>

Output

First Page
Next Page