border-width property
The border-width property sets a
border width for all sides simultaneously or
separately for each side. Is the shorthand property
for the
border-left-width,
border-right-width,
border-top-width,
border-bottom-width
properties.
The property value is any
size units,
except percentages, or the keywords thin
(border of 2 pixels), medium (border
of 4 pixels) or thick (border of
6 pixels). Default value: medium.
Syntax
selector {
border-width: 1, 2, 3 or 4 values;
}
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 top border, the second is for right, the third is for bottom, the fourth is for left border. |
Example
We set a border to be one pixel width:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set a border with a width
of 4 pixels:
<div id="elem"></div>
#elem {
border-width: 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set the width of a top and bottom borders
to 1px, and a right and left ones to
4px:
<div id="elem"></div>
#elem {
border-width: 1px 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set the width of a top border to 1px,
a right and left ones to 4px, and a bottom
to 6px:
<div id="elem"></div>
#elem {
border-width: 1px 4px 6px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
We set the width of a top border to 1px,
a right border to 4px, a bottom border
to 6px, and a left border to 8px:
<div id="elem"></div>
#elem {
border-width: 1px 4px 6px 8px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set a border width using the
thin keyword:
<div id="elem"></div>
#elem {
border-width: thin;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set a border width using the
medium keyword:
<div id="elem"></div>
#elem {
border-width: medium;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set a border width using the
thick keyword:
<div id="elem"></div>
#elem {
border-width: thick;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Example
Let's set different borders for different sides:
<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;
}
:
See also
-
the
border-styleproperty
that specifies a border style -
the
border-colorproperty
which sets a border color -
the
borderproperty
that is the shorthand property for a border