CSS Property column-rule-style
The column-rule-style property
sets the style of the rule(line) between columns.
Summary
- Initial value
- none
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.columnRuleStyle="dotted"
- Animatable
- no
CSS Syntax
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values
- none
- Default value. no rule
- hidden
- a hidden rule
- dotted
- a dotted rule
- dashed
- a dashed rule
- solid
- a solid rule
- double
- a double rule
- groove
- a 3D grooved rule. The effect depends on the width and color values
- ridge
- a 3D ridged rule. The effect depends on the width and color values
- inset
- a 3D inset rule. The effect depends on the width and color values
- outset
- a 3D outset rule. The effect depends on the width and color values
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
column-rule-style |
Yes | 10.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {<!--from www . j av a 2s . c om-->
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-style: dotted;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: dotted;
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
}
</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>