<line-style>
The <line-style>
enumerated value type represents keyword values that define the style of a line, or the lack of a line. The <line-style>
keyword values are used in the following longhand and shorthand border and column properties:
border
,border-style
border-block
,border-block-style
border-block-end
,border-block-end-style
border-block-start
,border-block-start-style
border-bottom
,border-bottom-style
border-inline
,border-inline-style
border-inline-end
,border-inline-end-style
border-inline-start
,border-inline-start-style
border-left
,border-left-style
border-right
,border-right-style
border-top
,border-top-style
column-rule
,column-rule-style
Syntax
css
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Values
The <line-style>
enumerated type is specified using one of the values listed below:
none
-
Displays no line. The computed value of the line width is
0
even if a width value is specified. In the case of table cell and border collapsing, thenone
value has the lowest priority. If any other conflicting border is set, it will be displayed. Thenone
value is similar tohidden
. -
Displays no line. The computed width of the line is
0
even if a width value is specified. In the case of table cell and border collapsing, thehidden
value has the highest priority. If any other conflicting border is set, it won't be displayed. Thehidden
value is similar tonone
, buthidden
is not a valid value for outline styles. dotted
-
Displays a series of round dots. The radius of the dots is half the computed value of the line's width. The spacing of the dots is not defined by the specification and is implementation-specific.
dashed
-
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid
-
Displays a single, straight solid line.
double
-
Displays two straight lines with some space between them. The length of the lines adds up to the pixel size defined by the line's width.
groove
-
Displays a border with a carved appearance. This value is the opposite of
ridge
. ridge
-
Displays a border with an extruded appearance. This value is the opposite of
groove
. inset
-
Displays a border that makes the element appear embedded. This value is the opposite of
outset
. When applied to a table cell border andborder-collapse
is set tocollapsed
, this value behaves likegroove
. outset
-
Displays a border that makes the element appear embossed. This value is the opposite of
inset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likeridge
.
Note: When <outline-style>
is used as the value type for outline
and outline-style
properties, it is similar to <line-style>
, but does not support hidden
and includes the auto
value. When auto
is set, the user-agent defined <line-style>
value is used.
Examples
The first example demonstrates all the <line-style>
keyword values. The second example demonstrates how some line style colors may display in unexpected ways.
Defining line styles
This example shows all the <line-style>
values as values for the CSS border-style
and column-rule-style
properties.
HTML
This example uses multiple <div>
elements, each with a class representing the <line-style>
value that is being demonstrated.
html
<div class="<line-style>">
<p><line-style></p>
<p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
CSS
In the CSS for this example, the border and the column-rule for all the <p>
elements is defined to have a width of 7px
and the style value of double
. For each paragraph, the double
value is then overridden by specifying a different <line-style>
value for the border-style
and column-rule-style
properties.
css
p {
padding: 5px;
border: double 7px #bada55;
}
p + p {
columns: 3;
column-gap: 20px;
column-rule: double 7px;
border-color: #000000;
}
.none p {
border-style: none;
column-rule-style: none;
}
.hidden p {
border-style: hidden;
column-rule-style: hidden;
}
.dotted p {
border-style: dotted;
column-rule-style: dotted;
}
.dashed p {
border-style: dashed;
column-rule-style: dashed;
}
.solid p {
border-style: solid;
column-rule-style: solid;
}
.double p {
border-style: double;
column-rule-style: double;
}
.groove p {
border-style: groove;
column-rule-style: groove;
}
.ridge p {
border-style: ridge;
column-rule-style: ridge;
}
.inset p {
border-style: inset;
column-rule-style: inset;
}
.outset p {
border-style: outset;
column-rule-style: outset;
}
Result
Notice that the black border is not always black.
Defining line styles and colors
This example demonstrates line-style and color choice. With some <line-style>
keyword values, the color of the line may not be what you expect. To create the required "3D" effect of groove,
ridge
, inset
, and outset
styles when displaying these values in black or white, user agents use different color calculations than any other color-line combinations.
HTML
This example uses multiple <div>
elements, each with a different border-color
set as an inline style
.
html
<div style="border-color: #000000"></div>
CSS
The four sides of each <div>
have a different <line-style>
value, and each list item has a different <color>
value. We use generated content to display the CSS declared inline.
css
div {
border-width: 10px;
border-style: inset groove ridge outset;
padding: 5px;
}
div::before {
content: attr(style);
}
Result
Notice that the almost-black color of #000001
may be different from the actual black, and the contrast between the dark and light edges is more noticeable when using lighter colors.
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # typedef-line-style |
Browser compatibility
BCD tables only load in the browser
See also
- CSS backgrounds and borders module
- CSS basic user interface module
- CSS multi-column layout module