Search PI
Programming Infinity
Programming in a way to understand
Featured to Learn
- Get link
- Other Apps
Labels
CSS column-rule-style Property
Example
Specify the style of the rule between columns:
div {
column-rule-style: dotted;
}
column-rule-style: dotted;
}
Definition and Usage
The column-rule-style
property specifies the style of the rule between columns.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.columnRuleStyle="dotted" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
column-rule-style
is applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
column-rule-style | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS Syntax
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
none | Default value. Defines no rule | |
hidden | Defines a hidden rule | |
dotted | Defines a dotted rule | |
dashed | Defines a dashed rule | |
solid | Defines a solid rule | |
double | Defines a double rule | |
groove | Specifies a 3D grooved rule. The effect depends on the width and color values | |
ridge | Specifies a 3D ridged rule. The effect depends on the width and color values | |
inset | Specifies a 3D inset rule. The effect depends on the width and color values | |
outset | Specifies a 3D outset rule. The effect depends on the width and color values | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
More Examples
Example
Divide the text in a <div> element into three columns:
div {
column-count: 3;
}
column-count: 3;
}
Example
Specify a 40 pixels gap between the columns:
div {
column-gap: 40px;
}
column-gap: 40px;
}
Example
Specify the width, style, and color of the rule between columns:
div {
column-rule: 4px double #0000ff;
}
column-rule: 4px double #0000ff;
}
- Get link
- Other Apps
Tags
CSS Properties
Learn CSS
Most Reads
Thunkable #2 - How to show Admob Banner and Interestial Ads using Thunkable
- Get link
- Other Apps
Thunkable #4 - Introduction to advanced features | Webview Explanation
- Get link
- Other Apps
Thunkable #6 - Text Input and Label of User Interface full and simple explanation with use
- Get link
- Other Apps
How to use Switch in Thunkable | Designer and Blocks Clear Explanation
- Get link
- Other Apps
HTML #11 - Tables in HTML and it's properties #part1
- Get link
- Other Apps
How to use Alert in Thunkable | Designer and Blocks clear explanation
- Get link
- Other Apps
Android #11 - ScrollView | Adding Relative Layout to ScrollView | Calendar #3
- Get link
- Other Apps
HTML #9 - HTML Images and it's attributes Introduction, Uses and How to use
- Get link
- Other Apps
HTML #8 - HTML Text Formatting, Uses and How to Use
- Get link
- Other Apps
Android Studio #2 - Button's Introduction and uses
- Get link
- Other Apps
Comments
Post a Comment