CSS3 Multiple Columns: Column-Rule Shorthand

The column-rule property is a shorthand property for setting all the column-rule-* properties used previously. Using the shorthand property, the following example sets the width, style, and color of the rule between columns:

column-rule: 1px solid lightblue;
HTML file: Displayed by browser:
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
</style>
<body>
<div class="newspaper"> Whenever you use a computer, you make decisions that can affect your comfort, health, safety, and productivity. This is true whether you use a desktop keyboard and monitor in an office, a notebook computer in a college dormitory, a tablet in the kitchen, or a handheld computer at the airport. In every case, you choose your body’s position relative to the technology. Whether you are working, studying, or playing, staying in one position for long periods can cause discomfort and fatigue in your muscles and joints. Rather than computing in a single seated posture, move regularly through a range of seated and standing positions, finding your comfort zone in each of them. Many people do not naturally incorporate a standing posture into the range of positions because it is unfamiliar. With practice, however, they realize how much better they feel when they move from sitting to standing throughout the day.
</div>
</body>
Whenever you use a computer, you make decisions that can affect your comfort, health, safety, and productivity. This is true whether you use a desktop keyboard and monitor in an office, a notebook computer in a college dormitory, a tablet in the kitchen, or a handheld computer at the airport. In every case, you choose your body’s position relative to the technology. Whether you are working, studying, or playing, staying in one position for long periods can cause discomfort and fatigue in your muscles and joints. Rather than computing in a single seated posture, move regularly through a range of seated and standing positions, finding your comfort zone in each of them. Many people do not naturally incorporate a standing posture into the range of positions because it is unfamiliar. With practice, however, they realize how much better they feel when they move from sitting to standing throughout the day.

Note: Internet Explorer 9, and earlier versions, does not support the column-rule property.

Back button Table of Contents Next button