border-width
Shorthand property that sets the width for the overall border of an element or for each side individually.
Syntax
border-width: <value>;
where <value>
can be the following:
- Width keyword:
medium
,thin
,thick
- Length:
5px
Note: Providing one value will effect the width of all four borders. Providing two values will result in the first value setting the width of top and bottom borders and the second value setting the width of left and right. Three values will result in the first value applied to the top, the second value to the left and right, and the third value applied to the bottom. Four values will apply to top, right, bottom and left.
Example 1
Set all borders of the h1
element to medium
width:
h1 {border-color: green;border-style: dashed;border-width: medium;}
Example 2
Set the width of the border top and bottom to be 4px
and left and right to 2px
:
h1 {border-color: green;border-style: dashed;border-width: 4px 2px;}
Example 3
Set the width of the border top to 10px
, right and left to medium
and bottom to thick
:
h1 {border-color: green;border-style: dashed;border-width: 10px medium thick;}
Example 4
Set the width of the border top to 10px
, right to thin
, left to 20px
and bottom to thick
:
h1 {border-color: green;border-style: dashed;border-width: 10px thin 20px thick;}
All contributors
- Anonymous contributorAnonymous contributor3077 contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.