border-style (CSS property)
Syntax
Description
The shorthand property border-style
sets the style of the border on all four sides of an element using the values specified. Each border can have its own value—refer to the mnemonic (TRouBLe) in Shorthand Properties for an easy way to remember the shorthand order.
Borders are placed on top of the element’s background.
Example
This style rule assigns a solid border
to the top, a dashed border to the bottom, and a dotted border to the
left- and right-hand sides of paragraphs within the element with ID
"example"
:
#example p {
border-style: solid dotted dashed;
}
Value
-
none
means no border will show, and the computedborder-width
is zero. -
hidden
has the same meaning asnone
, except when it refers to table borders in cases where two cells share a border, and the table cells have collapsed borders (border-collapse:collapse;
). The valuehidden
ensures that no border is drawn, sincehidden
takes precedence over all other border styles. Ifnone
had been used for one border in the cell, the border would still be drawn, as the adjacent cell’s border would take precedence. See Table Formatting for more information. -
dotted
implements the border as a series of dots. -
dashed
implements the border as a series of dashes. -
solid
implements the border as a solid line. -
double
implements the border as two solid lines. The sum of the two border widths and the space between them equals the value that has been set forborder-width
. -
groove
is a three-dimensional effect that gives the impression that the border is carved into the canvas. -
ridge
is a 3D effect that has the opposite effect ofgroove
, in that the border appears to protrude from the canvas. -
inset
is a 3D effect that gives the impression that the box is embedded into the canvas. When it’s used on tables to which the separated borders model has been applied, theinset
value appears to make the whole box look as though it were embedded into the canvas. When used with the collapsing border model, it’s treated the same as the valueridge
. -
outset
is a 3D effect that has the opposite effect ofinset
in that the border gives the impression that the box protrudes from the canvas. When it’s used on tables to which the separated borders model has been applied, the border makes the whole box look as though it were coming out of the canvas. When it’s used with the collapsing border model, it behaves the same way asgroove
.
Previously, in CSS1, user agents were allowed to interpret all dotted
, dashed
, double
, groove
, ridge
, inset
, and outset
styles as solid
.