Column-rule-width

Description

Column-width set the width of the column-rule in the gap between columns.
Column-rule sits in the middle of the column-gap and is styled much like a normal border.

Part of CSS3 Multi-column layout module.

See also:

Border-width

Columns

Column-gap

Column-rule

Column-rule-style

Column-rule-color

Live Example

Play with the code in the textarea below.

<!doctype html>
<html>
<head>
<style type="text/css">
body{
  -moz-columns: 3 auto;
  -webkit-columns: 3 auto;
  columns: 3 auto;
  -moz-column-rule: 1px solid red;
  -webkit-column-rule: 1px solid red;
  column-rule: 1px solid red;
  -moz-column-rule-width: 1em;
  -webkit-column-rule-width: 1em;
  column-rule-width: 1em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet ullamcorper justo. Fusce sit amet neque lectus. Donec in urna est, quis consequat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sodales enim orci. Morbi sed erat non odio blandit pharetra. Donec non faucibus augue. Nam eu odio massa. Quisque placerat tincidunt imperdiet. Fusce fermentum gravida libero vel gravida. Mauris euismod ornare leo ut accumsan. Nullam ut urna ut enim tincidunt scelerisque. Aliquam condimentum, urna id viverra eleifend, lorem risus iaculis eros, non cursus arcu tortor sollicitudin nisl. Mauris tincidunt lobortis faucibus. Ut urna ante, sodales id accumsan sit amet, convallis eget turpis.</p>

<p>Quisque sagittis convallis justo quis malesuada. Vestibulum fermentum venenatis nibh eget imperdiet. In eget aliquam felis. Vivamus ornare, elit vitae cursus vehicula, leo metus auctor felis, et rutrum magna mauris elementum orci. Aenean et commodo eros. Maecenas quis orci diam, dapibus pulvinar elit. Suspendisse leo metus, posuere nec placerat sed, porta vel ipsum. In hac habitasse platea dictumst.</p>
</body>
</html>

Values

border-width

Default value

medium

Introduced in CSS version

Applies to elements

multi column elements

Inherited

Browser Support

Browsers	IE	Firefox	Safari	Opera	Chrome
Versions	10	-moz-	-webkit-	12	-webkit-

Belongs to:

Multi-column Layout

See the full list CSS properties and browser support: CSS Properties

User login

Navigation