CSS Property column-rule

The column-rule property is a shorthand property for setting all the column rule properties(A line between columns.).

The column-rule property sets the width, style, and color of the rule between columns.

For example we can add a vertical line between each column by using column-rule.

Summary

Initial value: medium none color
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.columnRule="1px outset red"
Animatable: Yes

CSS Syntax

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

Property Values

column-rule-width: Default to medium. Sets the width of the rule between columns.
column-rule-style: Default to none. Sets the style of the rule between columns.
column-rule-color: Default to the color of the element. Sets the color of the rule between columns.
initial: sets to default value
inherit: Inherits this property from its parent element

Browser compatibility


`column-rule`	Yes	10.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--   ww  w .j a v  a2s  . com-->
    -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: 4px outset red; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset red; /* Firefox */
    column-rule: 4px outset red;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi. Nam liber tempor cum 
soluta nobis eleifend option congue nihil imperdiet doming 
id quod mazim placerat facer possim assum. Typi non habent 
claritatem insitam; est usus legentis in iis qui facit 
eorum claritatem. Investigationes demonstraverunt lectores 
legere me lius quod ii legunt saepius.
</div>

</body>
</html>

Click to view the demo

Example 2

The following example compares various line styles.

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.example {<!--  www.j  a v a2 s . c  o m-->
  -webkit-columns: 3 150px;
  -moz-columns: 3 150px;
  columns: 3 150px;
  -webkit-column-gap: 5em;
  -moz-column-gap: 5em;
  column-gap: 5em;
  -webkit-column-rule-width: 4px;
  -moz-column-rule-width: 4px;
  column-rule-width: 4px;
  -webkit-column-rule-color: #e74c3c;
  -moz-column-rule-color: #e74c3c;
  column-rule-color: #e74c3c;
  margin: 2em auto 7em;
}

.example-dotted {
  -webkit-column-rule-style: dotted;
  -moz-column-rule-style: dotted;
  column-rule-style: dotted;
}

.example-dashed {
  -webkit-column-rule-style: dashed;
  -moz-column-rule-style: dashed;
  column-rule-style: dashed;
}

.example-solid {
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  column-rule-style: solid;
}

.example-double {
  -webkit-column-rule-style: double;
  -moz-column-rule-style: double;
  column-rule-style: double;
}

.example-groove {
  -webkit-column-rule-style: groove;
  -moz-column-rule-style: groove;
  column-rule-style: groove;
}

.example-ridge {
  -webkit-column-rule-style: ridge;
  -moz-column-rule-style: ridge;
  column-rule-style: ridge;
}

.example-inset {
  -webkit-column-rule-style: inset;
  -moz-column-rule-style: inset;
  column-rule-style: inset;
}

.example-outset {
  -webkit-column-rule-style: outset;
  -moz-column-rule-style: outset;
  column-rule-style: outset;
}

.example-none {
  -webkit-column-rule-style: none;
  -moz-column-rule-style: none;
  column-rule-style: none;
}

.example-hidden {
  -webkit-column-rule-style: hidden;
  -moz-column-rule-style: hidden;
  column-rule-style: hidden;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

h1 {
  font-size: 4em;
  padding: 0.5em 0;
  text-align: center;
  font-family: "Courier New", monospace;
}

code {
  font-family: "Courier New", monospace;
  background: white;
  border-radius: 0.2em;
  padding: 0 0.2em;
}
</style>
</head>
<body>
<div class='example example-dotted'>
  <h1>dotted</h1>
  <p>This example uses <code>column-rule-style: dotted;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-dashed'>
  <h1>dashed</h1>
  <p>This example uses <code>column-rule-style: dashed;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-solid'>
  <h1>solid</h1>
  <p>This example uses <code>column-rule-style: solid;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-double'>
  <h1>double</h1>
  <p>This example uses <code>column-rule-style: double;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-groove'>
  <h1>groove</h1>
  <p>This example uses <code>column-rule-style: groove;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-ridge'>
  <h1>ridge</h1>
  <p>This example uses <code>column-rule-style: ridge;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-inset'>
  <h1>inset</h1>
  <p>This example uses <code>column-rule-style: inset;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-outset'>
  <h1>outset</h1>
  <p>This example uses <code>column-rule-style: outset;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-none'>
  <h1>none</h1>
  <p>This example uses <code>column-rule-style: none;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-hidden'>
  <h1>hidden</h1>
  <p>This example uses <code>column-rule-style: hidden;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
</body>
</html>

Click to view the demo

Example 3

column-rule doesn't take up space. If the column-rule-width is thicker than the column-gap then the rule will expand underneath the columns.

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.example {<!--from   w  ww  .j  a v  a 2 s . com-->
  -webkit-columns: 3 150px;
  -moz-columns: 3 150px;
  columns: 3 150px;
  -webkit-column-gap: 50px;
  -moz-column-gap: 50px;
  column-gap: 50px;
  -webkit-column-rule: 100px solid #e74c3c;
  -moz-column-rule: 100px solid #e74c3c;
  column-rule: 100px solid #e74c3c;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 2em 1em 0;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}
</style>
</head>
<body>
<div class="example">
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Cras porta bibendum orci nec dapibus. </p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Cras porta bibendum orci nec dapibus. </p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Cras porta bibendum orci nec dapibus. </p>
  <p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor. Vestibulum tempus magna auctor purus elementum congue.</p>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at augue eros. Nam tincidunt mi eu malesuada molestie.</p>
  <p>Quaerat distinctio, facere sed magni adipisci ex beatae et architecto soluta unde cumque dolorem dicta molestias maxime non inventore, odio incidunt, libero.</p>
</div>
</body>
</html>

Click to view the demo