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>

Click to view the demo