The border-style property
The border-style property specifies a
border style for all sides simultaneously or
separately for each side. It is a shorthand
property for the following properties:
border-left-style,
border-right-style,
border-top-style,
border-bottom-style.
Syntax
selector {
border-style: value;
}
Values
| Value | Description |
|---|---|
solid |
Solid line. |
dotted |
Dotted border. |
dashed |
Dashed border. |
ridge |
Border as a ridge line. |
double |
Double line border.
To see the effect, the border width should be at least 3px.
|
groove |
Grooved border. |
inset |
Inset border. |
outset |
Outset border. |
none |
No border. |
Default value: none.
Number of values
The property can take 1, 2, 3
or 4 values separated by a space:
| Number | Description |
|---|---|
1 |
Type for all sides at once. |
2 |
The first value is for top and bottom, the second is for left and right borders. |
3 |
The first value is for top, the second is for left and right borders, the third is for bottom. |
4 |
The first value is for the top border, the second is for right, the third is for bottom, the fourth is for the left border. |
Example . The solid value
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The dotted value
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The dashed value
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: dashed;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The ridge value
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: ridge;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The double value
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: double;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The groove value
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: groove;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The inset value
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: inset;
border-color: black;
width: 300px;
height: 100px;
}
:
Example . The outset value
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: outset;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
This example specifies different border types for different sides of elements:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid dotted dashed dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
And now different sides of the element are also given different border width and color:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Example
Currently the upper and lower borders are set
to solid, and the right and left borders
are set to dotted:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
See also
-
the
border-colorproperty
that sets a border color -
the
border-widthproperty
that sets a border width -
the
borderproperty
that is a shorthand property for a border
