The border-width property sets the width of the border.
The width is set as a pixel value, or as thin, medium, or thick.
A thin border-width.
<style>
.border-thin {
padding: 20px;
border-style: solid;
border-color: tomato;
border-width: thin;
}
</style>
<div class="border-thin">
Element with a thin border
</div>
The border-width property accepts one to four values for the top, right, bottom, and left sides respectively.
The default border size is medium or 1 pixel.
border-width: medium | thin | thick | length | initial | inherit;
| Value | Description |
|---|---|
| medium | Default. Medium border |
| thin | Thin border |
| thick | Thick border |
| length | Sets border thickness using CSS units |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-width values.
<style>
.border-example {
padding: 20px;
border-style: solid;
border-color: firebrick;
border-width: thick;
}
</style>
<div class="border-example">
border-width: thick
</div>
Click the buttons to see different border sizes applied to each side of the element.
<style>
.border-example-multiple {
padding: 15px;
border-style: solid;
border-color: tomato;
border-width: thin thick;
}
</style>
<div class="border-example-multiple">
border-width: thin thick
</div>
Each border side can have a different size; values are assigned like so:
This table shows when border-width support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
