CSS border-width
Description
The border-width property is a short-hand command to defines the border widths of all sides an html element.
No default
Note: You have to set the border-style as well otherwise the border will not show because border-style defaults to none.
Set the border width for all sides of an element:
border-width: thin;
border-width: medium;
border-width: think;
border-width: length; e.g. border-width: 3px;
Set different border widths for individual sides of an html element:
border-width: 5px 10px 5px 10px;
See also: border-top-width, border-bottom-width, border-left-width, border-right-width
Examples for Border
Example 1:
This is the most straightforward example, all borders the same size of 5px.
test text test text test text test text
<style>
#test { border-width:5px; border-style: solid; border-color: red; }
</style>
<div id="test">test text test text test text test text</div>
Example 2:
This example shows different widths set for each border.
test text test text test text test text
<style>
#test2 { border-width:5px 20px 5px 20px; border-style: solid; border-color: red; }
</style>
<div id="test2">test text test text test text test text</div>
Values for Border
| border-width |
px e.g. 5px
thin
medium
thick
px px px px e.g. 5px 10px 5px 10px |
Set the width of the border in pixels or inches. |
| border-top-width |
px e.g. 5px
thin
medium
thick |
Set the width of the top border of an element in pixels or inches. |
| border-bottom-width |
px e.g. 5px
thin
medium
thick |
Set the width of the bottom border of an element in pixels or inches. |
| border-left-width |
px e.g. 5px
thin
medium
thick |
Set the width of the left border of an element in pixels or inches. |
| border-right-width |
px e.g. 5px
thin
medium
thick |
Set the width of the left border of an element in pixels or inches. |